Статьи / Веб-Дизайн / Основы работы со слоями в CSS

  2008-11-04 11:49

Для задания имени слоя используется
атрибут style="FONT-WEIGHT: bold; ">ID,
который уникальным образом определяет элемент в документе и
применяется для обращения к нему из скрипта. Документы с
повторяющимися значениями
style="FONT-WEIGHT: bold; ">ID
считаются технически недействительными.

Чтобы определить стиль слоя используется
style="FONT-WEIGHT: bold; ">ID-селектор,
который задается символом решетки (#) в начале имени селектора (в
примере - #layer1).


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


Internet Explorer
Браузер использует обращение к слою
тремя способами: с помощью метода семейства
style="FONT-WEIGHT: bold; ">item,
напрямую по имени элемента и косвенно через массив. Так, для слоя с
именем layer1 обращение будет следующим.

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

document.all.item("layer1")
document.all.layer1
document.all["layer1"]


Ссылаясь с помощью метода
style="FONT-WEIGHT: bold; ">item
или через массив семейства
style="FONT-WEIGHT: bold; ">all,
можно запросить слой по имени, передавая его в качестве
параметра.


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

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

document.layers.layer1
document.layers["layer1"]


Отличие от браузера Internet Explorer - в семействе
style="FONT-WEIGHT: bold; ">layers
объекта style="FONT-WEIGHT: bold; ">document,
который поддерживается только браузером Netscape версии 4 и
выше.


Opera
Opera предлагает свой путь работы со слоями,
через семейство style="FONT-WEIGHT: bold; ">getElementByIdобъекта
style="FONT-WEIGHT: bold; ">document.
Обращение к слою будет следующим..

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

document.getElementById("layer1")


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


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

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

<script language="JavaScript">
NC =
(document.layers);
IE = (document.all);
Opera =
(document.getElementById);
</script>


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


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


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


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

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

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


Netscape Communicator напрямую.

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

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


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

style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

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


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


Как спрятать слой
По умолчанию элемент видим, если
отображается его родитель. Например, скрытие элемента BODY прячет
все содержимое документа. Эффект видимости можно установить явно,
тогда любые наследования учитываться не будут. Для скрытия слоя
следует изменить значение свойства
style="FONT-WEIGHT: bold; ">visibility
путем установки параметра
style="FONT-WEIGHT: bold; ">hidden.


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


style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

<html>
<head>
<script
language="JavaScript">
function hiddenLayer() {
NC =
(document.layers);
IE = (document.all);
Opera =
(document.getElementById);


style="COLOR: #990099; ">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>


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


Как показать невидимый слой
Если слой невидим, его
можно показать с помощью того же параметра
style="FONT-WEIGHT: bold; ">visibility,
который принимает значение
style="FONT-WEIGHT: bold; ">visible.
В примере 3 показывается, как можно динамически делать слой видимым
или прятать его.


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


style="BORDER-RIGHT: navy 1px dashed; BORDER-TOP: navy 1px dashed; MARGIN-LEFT: 30px; BORDER-LEFT: navy 1px dashed; COLOR: navy; BORDER-BOTTOM: navy 1px dashed; FONT-FAMILY: 'Courier New', Courier, monospace">

<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();


style="COLOR: #990099; ">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="COLOR: #990099; ">style="position:
relative; visibility: hidden">Данная
эксклюзия
является подмножеством астрациональных супремативных
монотенных
федоний кадонарного
экстрафазория.</div>
</td></tr></table>
</body>
</html>