// — >
</script>
<head>
<body>
<a href='link1.htm' onMouseOver='on('link1)'
onMouseOut='off()'>
<img name='link1' src='link1f.gif'
width='140' height='50' border='0'></a>
<a href='link2.htm' onMouseOver='on('link2)'
onMouseOut='off()'>
<img name='link2' src='link2f.gif'
width='140' height='50' border='0'></a>
<a href='link3.htm' onMouseOver='on('link3)'
onMouseOut='off()'>
<img name='link3' src='link3f.gif'
width='140' height='50' border='0'></a>
</body>
</html>
Данный скрипт помещает все изображения в массив
preload('link1', 'img1f.gif', 'img1t.gif');
Это означает, что скрипт должен загрузить с сервера два изображения:
Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна).
Изображения — без сомнения могучее средство уличшения Вашей web-страницы. Объект Image дает Вам возможность создавать действительно сложные эффекты. Однако заметим, что
Часть 9: Слои I
Что такое слои?
Слои — это одна из замечательных новых возможностей браузера Netscape Navigator 4.0. Она позволяет выполнять точное позиционирование таких объектов web-страницы, как изображения. Кроме того, теперь Вы можете перемещать объекты по вашей HTML-странице. Вы можете также делать объекты невидимыми.
Управлять слоями можно легко с помощью языка JavaScript. Я надеюсь, что Вы, как и я, проникнитесть энтузиазмом в отношении возможностей этих слоев.
В данный момент пользоваться слоями Вы можете только в Netscape Navigator 4.0!
И, как обычно, я не буду детально описывать различные тэги. Хороший документ, описывающий все свойства такого объекта Netscape Navigator 4.0, как слои, находится по адресу http://home.netscape.com/comprod/products/communicator/index.html — и потому у меня нет нужды его пересказывать.
Что такое в действительности слои? Объяснять это очень легко на простом примере: берете несколько листов бумаги. На одном листе пишете текст. На другом — рисуете картинку. На третьем листе берете картинку и вписываете вокруг нее некий текст. И так далее. Теперь кладете эти листы на стол. Допустим, каждый лист — это некий слой. В этом смысле слой представляет собой в некотором роде контейнер. То есть он может включать в себя (содержать) некие объекты — в данном случае это будет текст и изображения.
Теперь берем бумагу с изображением и двигаем его по столу. Внимательно следите за тем, как это изображение движется вслед за бумагой. Если Вы сместим лист бумаги вправо, то и изображение тоже сдвинется! И что же собственно мы должны извлечь из этого увлекательного опыта? Слои, способные содержать различные объекты, например изображения, формы, текст, могут быть наложены на Вашу HTML-страницу и даже перемещаться по ней. Если Вы сдвигаете какой-либо слой, то и все содержащиеся в этом слое объекты тоже будут повторять это движение.
Слои могут накладываться друг на друга подобно простым листам бумаги на столе. В каждом слое могут присутствовать прозрачные области. Сделайте в листе бумаги дырку. Теперь положите этот лист на другой. Такое отверстие — это 'прозрачная область' на первом листе — и через нее как раз видны нижележащие листы.
Создание слоев
Чтобы создать слой, мы должны использовать либо тэг <layer> либо <ilayer>. Вы можете воспользоваться следующими параметрами:
Тэг <layer> используется для тех слоев, которые Вы можете точно позиционировать. Если же Вы не указываете положение слоя (с помощью параметров
Тэг <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 (через параметры
