Доступ к этим слоям можно также получить через целочисленный индекс. Так, чтобы получить доступ к самому нижнему слою, Вы можете написать 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 или выше).

Исходный код скрипта выглядит следующим образом:

Данная кнопка вызывает функцию showHide(). Можно видеть, что в этих функциях реализуется доступ к такому свойству объекта layer (myLayer), как видимость. Присвоивая параметру document.layers["myLayer"].visibility значения "show" или "hide", Вы можете показать или скрыть наш слой. Заметим, что "show" и "hide" — это строки, а не зарезервированные ключевые слова, то есть Вы не можете написать document.layers["myLayer"].visibility= show.

Вместо тэга я также пользовался тэгом , поскольку хотел поместить этот слой в "информационный поток" документа.

Перемещение слоев

Свойства left и top определяют задают положение данного слоя. Вы можете менять его, записывая в эти атрибуты новые значения. Например, в следующей строке задается горизонтальное положение слоя в 200 пикселов:

Перейдем теперь к программе перемещения слоев — она создает нечто вроде прокрутки внутри окна браузера.

Сам скрипт выглядит следующим образом:

Мы создаем слой с именем myLayer2. Можно видеть, что в тэге мы пользуемся процедурой onLoad. Нам необходимо начать прокручивание слоя, как только страница будет загружена. В процедуре обработки события onLoad мы пользуемся функцией setInterval(). Это один из новых методов версии 1.2 языка JavaScript (то есть версии JavaScript, реализованной в Netscape Navigator 4.0). Им можно пользоваться, чтобы вызывать некую функцию мвновь и вновь через определенные интервалы времени. В прошлом для этого мы пользовались функцией setTimeout(). Функция setInterval() работает почти так же, однако Вам нужно вызвать ее всего лишь один раз.

С помощью setInterval() мы вызываем функцию move() каждые 20 миллисекунд. А функция move(), в свою очередь, всякий раз смещает слой на новую позицию. И поскольку мы вызываем эту функцию вновь и вновь, то мы получаем быстрый скроллинг нашего текста. Все, что мы нужно сделать в функции move() — это вычислить новую координату для слоя и записать ее: document.layers["myLayer2"].left= pos.

Если Вы посмотрите исходный код этой части в онлайновом описании, то увидите, что в действительности мой код выглядит несколько иначе — я добавил некий фрагмент кода с тем, чтобы люди, работающие со старыми версиями JavaScript-браузеров, не получали из-за этого никаких сообщений об ошибках. Как этого можно достичь? Следующий фрагмент кода будет выполняться только на тех браузерах, которые воспринимают язык JavaScript 1.2:

Та же самая проблема возникает, когда мы работаем с объектом Image. Мы можем аналогичным способом переписать кодекс. Установка переменной browserOK решает эту проблему.

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

Текст внутри слоя

Мы уже обсудили основные понятия новой технологии слоев. В этой же части будут рассмотрены следующие темы:

· Вырезка из слоя

· Вложенные слои

· Различные эффекты с прозрачными слоями

Вырезка из слоя

Можно постулировать, что какая-то (прямоугольная) часть слоя будет нам видима. Все же, что лежит за ее пределами, показано на экране не будет. Такой прием называется вырезанием. Например, в разметке HTML можно задать следующую функцию вырезания:

(Здесь я приписал параметры left=0 и top=0, поскольку в противном случае, если этого не сделать, то с моей версией Netscape (PR3 on WinNT) возникают некоторые проблемы)

Хотя само изображение и имеет размеры 209x264 пикселов, мы можем видеть лишь его малую часть:

Данный фрагмент изображения имеет размер 90x70 (пикселов). Первые два значения, указанные в атрибуте clip (атрибуте HTML-тэга или ), указывают верхний левый угол вырезаемой части. Следующие два значения указывают нижний правый угол. Сказанное можно проиллюстрировать следующим рисунком:

Еще более интересных результатов можно добиться, управляя вырезанной частью с помощью языка JavaScript. Точнее, Вы можете изменять значения свойств clip.left, clip.top, clip.right и clip.bottom объекта Layer. Достаточно всего лишь занести в одно из этих свойств новое значение, как фрагмент тут же будет кадрирован соответствующим образом. В следующем примере параметры вырезанной части изображения меняются динамически, и в результате у пользователя создается впечатление, будто изображение медленно «растет»:

Код соответсвующего скрипта: