JavaScript для мага


Создание слоев


Чтобы создать слой, мы должны использовать либо тэг <layer> либо <ilayer>. Вы можете воспользоваться следующими параметрами:

 

Параметр

Описание

name="layerName"

Название слоя

left=xPosition

Абсцисса левого верхнего угла

top=yPosition

Ордината левого верхнего угла

z-index=layerIndex

Номер индекса для слоя

width=layerWidth

Ширина слоя в пикселах

clip="x1_offset,y1_offset,x2_offset,y2_offset"

Задает видимую область слоя

above="layerName"

Определяет, какой слой окажется под нашим

below="layerName"

Определяется, какой слой окажется над нашим

Visibility=show|hide|inherit

Видимость этого слоя

bgcolor="rgbColor"

Цвет фона - либо название стандартного цвета, либо rgb-запись

background="imageURL"

Фоновая картинка

 

Тэг <layer> используется для тех слоев, которые Вы можете точно позиционировать. Если же Вы не указываете положение слоя (с помощью параметров left и top), то по умолчанию он помещается в верхний левый угол окна.

Тэг <ilayer> создает слой, положение которого определяется при формировании документа.

 

Давайте теперь начнем с простого примера. Мы хотим создать два слоя. В первом из них мы помещаем изображение, а во втором - текст. Все, что мы хотим сделать - показать этот текст поверх данного изображения.

Текст поверх изображения

 

Исходный код:

 

<html>

 

<layer name=pic z-index=0 left=200 top=100>

<img src="img.gif" width=160 height=120>

</layer>

 

<layer name=txt z-index=1 left=200 top=100>

<font size=+4> <i> Layers-Demo </i> </font>

</layer>

 

</html>

 

Как видим, с помощью тэга <layer> мы формируем два слоя. Оба слоя позиционируются как 200/100 (через параметры left и top). Все, что находится между тэгами <layer> и </layer> (или тэгами <ilayer> и </ilayer>) принадлежит описываемому слою.

Кроме того, мы используем параметр z-index, определяя тем самым порядок появления указанных слоев - то есть, в нашем случае, Вы тем самым сообщаете браузеру, что текст будет написан поверх изображения. В общем случае, именно слой с самым высоким номером z-index будет показан поверх всех остальных. Вы не ограничены в выборе z-index лишь значениями 0 и 1 - можно выбирать вообще любое положительное число.

Так, если в первом тэге <layer> Вы напишете z-index=100,  то текст окажется под изображением - его слой номер Z-индекса (z-index=1). Вы сможете увидеть текст сквозь изображение, поскольку я использовал в нем прозрачный фон (формат gif89a).

 

 

Тект под изображением

 




Начало  Назад  Вперед



Книжный магазин