WWW.R-E-K.RU

Слои предоставляют собой фрагменты 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 и выше. Начиная с 6 версии Netscape, указанное обращение не следует использовать.
Opera
Opera предлагает свой путь работы со слоями, через семейство getElementById объекта document. Обращение к слою будет следующим..

document.getElementById("layer1")

Это не массив, поэтому указание имени слоя берется в круглые скобки.
DOM (Объектная модель документа)
DOM рекомендует использовать для обращения к слою метод document.getElementById("layer"). Его поддержка встроена во все последние версии браузеров и корректно ими воспринимается.

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

<script language="JavaScript">
 NC = (document.layers); // Netscape 4.x
 IE = (document.all); // Internet Explorer
 Opera = (document.getElementById); // Opera
</script>

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

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

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

Netscape Communicator 4 напрямую.

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

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

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

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