Основы работы со слоями. Библиотека I2R. Статья посвящена работе со слоями и JavaScript - как с помощью этих инструментов создавать на веб-странице разные эффекты, такие, как: выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и другое.

Слои предоставляют собой фрагменты HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Cлои, также, позволяют изменять параметры слоя динамически, с помощью языка JavaScript или VBScript. Это дает возможность создавать на веб-странице разные эффекты, такие, как: выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и другое.

Создание слоя

Для создания слоя применяется тег DIV. Его параметры можно прописать в стиле, либо указать непосредственно в самом теге.

Пример 1. Создание слоя


<style>

  #layer1 {position:relative;
  font-size:50px; z-index:2; color: navy}

  </style>
<div id="layer1">

  Содержимое слоя 1

  </div>
<div id="layer2"
  style="position:relative; top:-55; left:5; color:orange;
  font-size:80px; z-index:1">

  Содержимое слоя 2

  </div>

Для задания имени слоя используется атрибут ID, который уникальным образом определяет элемент в документе и применяется для обращения к нему из скрипта. Документы с повторяющимися значениями ID считаются технически недействительными.

Чтобы определить стиль слоя используется ID-селектор, который задается символом решетки (#) в начале имени селектора (в примере - #layer1).

Обращение к слою

JavaScript использует несколько способов обращения к слою, которые имеют свои особенности в различных браузерах.

Internet Explorer
Браузер использует обращение к слою тремя способами: с помощью метода семейства item, напрямую по имени элемента и косвенно через массив. Так, для слоя с именем layer1 обращение будет следующим.


document.all.item("layer1")

document.all.layer1

document.all["layer1"]

Ссылаясь с помощью метода item или через массив семейства all, можно запросить слой по имени, передавая его в качестве параметра.

Netscape Communicator
В данном браузере слои реализуются с помощью тега LAYER, который поддерживается только Netscape. На наше счастье, браузер прекрасно понимает и тег DIV, поэтому код для создания слоя, приведенный в Примере 1, не изменится. По другому будет лишь обращение к слою из JavaScript.


document.layers.layer1

document.layers["layer1"]

Отличие от браузера Internet Explorer - в семействе layers объекта document, который поддерживается только браузером Netscape версии 4 и выше.

Opera
Opera предлагает свой путь работы со слоями, через семейство getElementByIdобъекта document. Обращение к слою будет следующим..


document.getElementById("layer1")

Это не массив, поэтому указание имени слоя берется в круглые скобки.

Определение типа браузера

Поскольку разные браузеры предлагают свои собственные способы обращения к слоям, перед тем, как изменять параметры слоя, следует выяснить, в каком браузере открывается документ. В простейшем случае, определение браузера будет следующим.


 <script language="JavaScript">

 NC = (document.layers);

 IE = (document.all);

 Opera = (document.getElementById);

</script>

Здесь не определяется версия браузера, что в некоторых случаях может понадобиться.

Изменение параметров слоя

Вышеуказанные отличия в реализации разных браузеров при обращении к слоям этим не ограничиваются. При каждом изменении какого-либо параметра слоя, придется определять тип браузера и применять свои настройки.

Internet Explorer обращается к свойствам слоя через стили.


                   document.all["Имя слоя"].style.свойство = "параметр"

Netscape Communicator напрямую.


 document.layers["Имя слоя"].свойство = "параметр"

А Opera также применяет свойство стилей.


 document.getElementById("Имя слоя").style.свойство = "параметр"

Основные эффекты слоя, которые применяются для различных задач - спрятать/показать слой, изменение координат и положения слоя.

Как спрятать слой

По умолчанию элемент видим, если отображается его родитель. Например, скрытие элемента BODY прячет все содержимое документа. Эффект видимости можно установить явно, тогда любые наследования учитываться не будут. Для скрытия слоя следует изменить значение свойства visibility путем установки параметра hidden.

Пример 2. Прятанье слоя


<html>

 <head>

 <script language="JavaScript">

 function hiddenLayer() {

  NC = (document.layers);

  IE = (document.all);

  Opera = (document.getElementById);

 

 if(IE) eval('document.all["layer1"].style.visibility
 = "hidden"');

 if(NC) eval('document.layers["layer1"].visibility
 = "hidden"');

 if(Opera) eval('document.getElementById("layer1").style.visibility
 = "hidden"');

 }

 </script>

 </head>
<body onLoad="hiddenLayer()">

 <div id="layer1" style="position:relative;
 top:-55; left:5; color:orange; font-size:80px; z-index:1">Содержимое
 слоя</div>

 </body>

 </html>

Замечание: При скрытии с помощью параметра visibility, слой не удаляется из потока документа. То есть, если спрятать таким образом слой, он станет невидимым, но место, которое он занимает, останется. Если предполагается вывод разных слоев в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование.

Как показать невидимый слой

Если слой невидим, его можно показать с помощью того же параметра visibility, который принимает значение visible. В примере 3 показывается, как можно динамически делать слой видимым или прятать его.

Пример 3. Изменение видимости слоя


<html>

 <head>

 <script language="JavaScript">

 function init() {

 IE = (document.all)

 NC = (document.layers)

 Opera = (document.getElementById)

 }


function hiddenLayer() {

 init();

 if(IE) eval('document.all["descr"].style.visibility
 = "hidden"')

 if(NC) eval('document.layers["descr"].visibility
 = "hidden"')

 if(Opera) eval('document.getElementById("descr").style.visibility
 = "hidden"')

 }


function showLayer() {

 init();

 if(IE) eval('document.all["descr"].style.visibility
 = "visible"')

 if(NC) eval('document.layers["descr"].visibility
 = "visible"')

 if(Opera) eval('document.getElementById("descr").style.visibility
 = "visible"')

 }

 </script>

 </head>

<body> <table width="90%" border="1" cellspacing="0" cellpadding="4" bordercolor="#666666" align="center"> <tr> <td width="20%" align="center"><a href=# onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border=0></a></td> <td> <div id="descr" style="position: relative; visibility: hidden">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div> </td></tr></table> </body> </html>

Результат, демонстрирующий изменение видимости слоя показан ниже. При наведении курсора мыши на кнопку появляется ее описание, которое скрывается, когда курсор с кнопки убирается.

Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...