Читать «Введение в JavaScript для Мага» онлайн - страница 34
Стефан Кох
Доступ к этим слоям можно также получить через целочисленный индекс. Так, чтобы получить доступ к самому нижнему слою, Вы можете написать document.layers[0]. Обратите внимание, что индекс — это не то же самое, что параметр z-index. Если, например, Вы имеете два слоя, называемые layer1 и layer2 с номерами z-index 17 и 100, то Вы можете получить доступ к этим слоям через document.layers[0] и document.layers[1], а не через document.layers[17] и document.layers[100].
Слои имеют несколько свойств, которые можно изменять с помощью скрипта на JavaScript. В следующем примере представлена кнопка, которая позволяет Вам скрывать или, наоборот, предоставлять один слой (требуется Netscape Navigator версии 4.0 или выше).
Исходный код скрипта выглядит следующим образом:
<html>
<head>
<script language="JavaScript">
<!- hide
function showHide() {
if (document.layers["myLayer"].visibility == "show")
else document.layers["myLayer"].visibility= "show";
}
// — >
</script>
</head>
<body>
<ilayer name=myLayer visibility=show>
<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>
</ilayer>
<form>
<input type="button" value="Show/Hide layer" onClick="showHide()">
</form>
</body>
</html>
Вместо тэга <layer> я также пользовался тэгом <ilayer>, поскольку хотел поместить этот слой в "информационный поток" документа.
Перемещение слоев
Свойства left и top определяют задают положение данного слоя. Вы можете менять его, записывая в эти атрибуты новые значения. Например, в следующей строке задается горизонтальное положение слоя в 200 пикселов:
document.layers["myLayer2"].left= 200;
Перейдем теперь к программе перемещения слоев — она создает нечто вроде прокрутки внутри окна браузера.
Сам скрипт выглядит следующим образом:
<html>
<head>
<script language="JavaScript">
<!- hide
function move() {
if (pos < 0) direction= true;
if (pos > 200) direction= false;
if (direction) pos++
else pos-;
document.layers["myLayer2"].left= pos;
}
// — >
</script>
</head>
<body onLoad="setInterval('move(), 20)">
<ilayer name=myLayer2 left=0>
<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>
