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

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

<ilayer left=0 top=0 clip="20,50,110,120">
<img src="davinci.jpg" width=209 height=264>
</ilayer>

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

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

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

С помощью небольшого примера, используя 2 слоя, мы превращаем яндекс в гугль :)

<html>
<head>
<title>Тестовая страница</title>
 <style>
 img, div {
 position: absolute;
 }
 </style>
 </head>
 <body bgcolor=»#ffffff»>

 <img src=»http://img.yandex.net/i/www/logo.png» style=»left:0px;top:0px;» />
 <div style=»background-color:white;left:10px;top:10px;height:50px;width:50px;»>
 </div>
 <div style=»overflow:hidden;left:15px;top:15px;height:20px;width:20px;»>
 <img src=»http://img.yandex.net/i/www/logo.png» style=»position:absolute;left:-15px;top:-15px;» />
</div> 
 </body>
 </html>

Рубрика: Слои

Добавить комментарий

Вам надо войти, чтобы написать комментарий.