Каждый настоящий дизайнер знает, что для создания классной композиции не обойтись без использования слоев. С появлением браузера 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>
<font size="96">Dynamic Layer</font>
<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 сдвиг слоя относительно верхнего левого угла страницы
приведу один пример из книги А.Хоумера "Dynamic HTML: справочник", которая сейчас активно продвигается издательством Piter-Press. Речь идет о совместимости шрифтов для браузеров NN и MSIE при использовании тега <DIV>.
Небезызвестный в моем городе вебмастер сервера jeo.ru в своем комментарии справедливо заметил, что Netscape понимает тег DIV в сочетании с CSS-позиционированием, но при этом теряются свойства шрифта. Однако, решить эту проблему оказалось довольно просто.
Рассмотрим пример создания рельефной надписи.
<html>
<head><title>3D title</title>
<style>
P { font-family: "Impact, sans-serif";
font-size:96; color=red }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
<body bgcolor=#408080>
<div style="position:absolute; top:5; left:5;
width:600; height:100; margin:10">
<P class=shadow>Be happy!</P>
</div>
<div style="position:absolute; top:0; left:0;
width:600; height:100; margin:10">
<P class=highlight>Be happy!</P>
</div>
<div style="position:absolute; top:2; left:2;
width:600; height:100; margin:10">
<P>Be happy!</P>
</div>
</body>
</html>
В Internet Explorer все выглядит именно так, как и было задумано, но вот в Netscape куда-то пропадают заданные свойства шрифта (размер и гарнитура).
Эта проблема касается только тех свойств, которые пишутся через дефис: font-size, font-family. Кроме того, Netscape требует, чтобы шрифты задавались по отдельности. Следовательно тег <STYLE> должен выгдядеть так:
P { fontfamily: "Impact", "sans-serif"; fontsize:96;
color=red }
Правда такую конструкцию не понимает уже Internet Explorer. Для достижения совместимости, нужно создать универсальный набор стилей. В нижеследующем примере первая часть работает в обоих браузерах и определяет цвет шрифта, вторая задает свойства для NN и третья для MSIE.
<style>
P { color:red }
P { fontfamily: "Impact", "sans-serif"; fontsize:96 }
P { font-family: "Impact", "sans-serif"; font-size:96 }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
Главная страница 
