Непрофессиональное введение в JAVASCRIPT



             

Изменение изображений по событиям, инициированных пользователем - часть 3


<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>

Этот сценарий помещает все изображения в массив pics. Функция preload() , вызванная в начале заполняет этого массив. Вы можете видеть, что мы вызываем функцию preload() следующим образом:

preload("link1", "img1f.gif", "img1t.gif");

Это означает, что сценарий должен загрузить два изображения img1f.gif и img1t.gif. Первое изображение должно отображаться, когда курсор вне области изображения. Когда пользователь перемещает курсор по области изображения, показывается второе изображение. С первым параметром "img1" при вызове функции preload() мы определяем, какой Image-объект на web-странице принадлежит двум предварительно загруженным изображениям. Если Вы посмотрите на часть <body> нашего примера, Вы найдете изображение с именем img1. Мы используем имя изображения (а не номер) для того, чтобы можно было изменить порядок изображений без изменения сценария.

Две функции on() и off() вызваны через обработчики события onMouseOver и onMouseOut. Поскольку изображения не могут реагировать на события MouseOver и MouseOut, мы должны поместить ссылку в изображения.

Как Вы видите, функция on() устанавливает в начальное состояние все остальные изображения. Это необходимо, чтобы избежать того, что несколько изображений будут одновременно подсвечено (событие MouseOut не происходит например, когда пользователь перемещает курсор из изображения непосредственно за пределы окна).

Изображения, конечно замечательный путь для улучшения вашей web-страницы. Image-объект позволяет Вам создавать действительно сложные эффекты. Но пожалуйста обратите внимание на то, что не каждое

изображение и программа JavaScript улучшают вашу страницу. В сети, Вы можете видеть много примеров где изображения используются ужасным способом. Не количество изображений делает вашу страницу хорошей, а качество. Загружать 50 КБ плохой графики действительно раздражает. Помните об этом при создании эффектов изображения с помощью JavaScript и ваши посетители или покупатели наверняка возвратятся

[предыдущая] [содержание] [следующая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

My JavaScript-book




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