htmlbook.ru - Как спрятать и показать слой : Версия для печати

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

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

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

<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. В примере 2 показывается, как можно динамически делать слой видимым или прятать его.

<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>

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