Каждый настоящий дизайнер знает, что для создания
классной композиции не обойтись без использования слоев. С появлением
браузера Netscape Communicator 4, технологию слев можно применять
непосредственно для оформления Web-страниц. Слой - это HTML-контейнер
(тег LAYER, DIV или SPAN), в который можно помещать желаемое содержимое
для последующего точного позиционирования на странице. Слоям можно
задавать абсолютные координаты, относительную глубину, фон и т.д.
Атрибуты слоя можно изменять с помощью JavaScript. Можно, например,
нарисовать несколько картинок, представляющих кадры анимации, расположить
их на разных слоях и затем, поочередно изменяя атрибут видимости,
показывать поочередно картинки зрителю, создавая эффект анимации.
Для перемещения картинки по экрану можно просто менять позицию слоя,
на котором она расположена.
Я же хотел сказать о другом. Как известно, браузер InternetExplorer не поддерживают тег <LAYER> ни в 3-ей, ни в 4-ой версии, что фактически лишает всякого смысла применение этого тега и Java-скриптов в сочетании с ним, т. к. доля пользователей Netscape неуклонно снижается. Однако, если нужно добиться совместимости... В HTML есть ''законный" аналог тега <LAYER> - элемент <DIV>. Вот так будет выглядеть конструкция, совместимая с обоими браузерами:
<HTML> <BODY> <LAYER ...><!-- открытие слоя в NN --> <NOLAYER> <DIV ...><!-- открытие слоя в IE --> </NOLAYER> Содержимое слоя <NOLAYER> </DIV><!-- закрытие слоя в IE --> </NOLAYER> </LAYER><!-- закрытие слоя в NN --> </BODY> <HTML>
Ниже приведен пример кроссбраузерного HTML-кода
<html>
<body>
<layer name=MyLayer bgcolor="white" top=50 left=50
OnMouseOver="colorlayer('red')"
OnMouseOut="colorlayer('white')">
<nolayer>
<div id=MyDiv style="position:absolute;
top:50; left:50">
</nolayer>
<p><font size="96">Dynamic Layer</font></p>
<nolayer>
</div>
</nolayer>
<script language=JavaScript1.2>
function colorlayer(changeto)
{ bgColor=changeto }
</script>
</layer>
<script language=VBSCRIPT>
Sub MyDiv_onmouseover()
document.all.MyDiv.style.backgroundColor="red"
End Sub
Sub MyDiv_onmouseout()
document.all.MyDiv.style.backgroundColor="white"
End Sub
</script>
</body>
</html>
| Параметры тега <LAYER> |
|
| bacground="anyimage.gif" | фон слоя |
| height="100" width="100" | ширина и высота области |
| ID=MyLayer1 | идентификатор (имя) слоя |
| clip="10,10,50,50" | координаты границ |
| top=20 left=100 | сдвиг слоя относительно верхнего левого угла страницы |
Комментарий читателя
Незачем вообще применять тэг <LAYER> - достаточно определить слой с помощью CSS-позиционирования даже для тэга <TABLE>, хотя лучше всего для этого подходят <DIV> или <SPAN>. Нетшкаф понимает это, хотя и с некоторыми ограничениями. Например, он проигнорирует установки размера шрифта для данного слоя или эффект и цвет рамки слоя. Пример - www.jeo.ru