Wiki-учебник по веб-технологиям: JavaScript/СлоиИJavaScript ...

Главная | Каталог |

Слои и JavaScript


Теперь мы собираемся обращаться к слоям через JavaScript. Нам нужно начать с примера, где пользователь может нажать кнопку, чтобы скрыть и показать слой.

Сначала мы должны узнать, как слои представляются в JavaScript. Как обычно существует несколько путей. Лучше всего присвоить имя каждому слою. Если мы определяем уровень с

<layer ... name=myLayer>
...
</layer>


мы можем обратиться к этому уровню через document.layers["myLayer"].

Вы также можете обращаться к слоям через целочисленный индекс. Чтобы обращаться к самому нижнему слою, вы можете писать document.layers[0]. Пожалуйста обратите внимание, что индекс не тоже самое, что и свойство z- index. Если вы имеете например два слоя, названные layer1 и layer у которых z-индексом являются числа 17 и 100, вы можете обращаться к этим уровням через document.layers[0] и document.layers[1], а не через document.layers и document.layers[100].

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

Исходный текст выглядит так:

<html>
<head>
<script language="JavaScript">
<!-- hide

function showHide() {
  if (document.layers["myLayer"].visibility == "show")
    document.layers["myLayer"].visibility= "hide"
  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>


Кнопка вызывает функцию showHide. Вы можете видеть, что эта функция обращается к свойству visibility layer-объекта myLayer. Через присвоение show или hide в document.layers["myLayer"].visibility вы можете показать или скрыть слой. Пожалуйста обратите внимание, что строки “show”и “hide” не зарезервированные слова, то есть вы не можете писать document.layers["myLayer”].visibility= show. Использовался <ilayer> тег вместо тега <layer>, потому что мы хотели поместить слой в поток документа.