Отсечение

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

(Я добавил left=0 and top=0 поскольку моя версия Netscape (PR3 на WinNT) видимо имеет некоторые проблемы, если эти значения отсутствуют)
Хотя изображение размером 209x264 пикселей, Вы можете видеть только маленькую часть:

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

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

Вот этот код:

<html> <head> <script language="JavaScript"> <!-- hide var middleX, middleY, pos;

function start() { // get size of image var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height; // calculate pixel in the middle of image middleX= Math.round(width/2); middleY= Math.round(height/2); // starting position pos= 0; // start it! show(); } function show() { // increase size of clipping area pos+= 2; // step size document.layers["imgLayer"].clip.left= middleX- pos; document.layers["imgLayer"].clip.top= middleY- pos; document.layers["imgLayer"].clip.right= middleX+ pos; document.layers["imgLayer"].clip.bottom= middleY+ pos; // check if the whole image has been displayed if (!((pos > middleX) && (pos > middleY))) setTimeout("show()", 20); } // --> </script> </head> <body> <ilayer name="imgLayer" clip="0,0,0,0"> <img name=davinci src="davinci.jpg" width=209 height=264> </ilayer> <form> <input type=button value="Start" onClick="start()"> </form> </body> </html>

Кнопка в <body>-части вызывает функцию start(). Сначала мы должны вычислить позицию запуска - это пиксель в середине изображения. Мы сохраняем значения x и y этого пикселя в переменныхmiddleX b middleY. Затем вызывается функция show() Эта функция устанавливает область отсечения в зависимости от переменных middleX, middleY b pos. Переменная pos увеличивается каждый раз, когда вызывается функция show() Это означает, что область отсечения становится каждый раз больше. После выполнения show() мы устанавливаем время ожидания(таймаут) с помощью setTimeout() - так функции show() вызывается снова и снова. Этот процесс остановится, как только изображение появится целиком.
Пожалуйста обратите внимание, как мы получаем размер изображение в функции start():

var width= document.layers["imgLayer"].document.davinci.width; var height= document.layers["imgLayer"].document.davinci.height;

Через document.layers["imgLayer"] мы можем обратиться к слою, названному imgLayer. Но почему мы используем document после document.layers["imgLayer"]? Каждый слой содержит собственную HTML-страницу - это означает, что каждый слой имеет document -объект. Чтобы обращаться к изображению внутри слоя imgLayer мы должны обратиться к этому document-объекту. Вы можете видеть в коде, что изображение названо davinci. Остальное должно быть понятно.

Содержание раздела