Изменение изображений по событиям, инициированных пользователем
Вы можете создавать хорошие эффекты через изменение изображений при реакции на некоторые события. Вы можете например изменять изображения, когда курсор мыши передвигается поверх некоторой области. Просто проверьте следующий пример: проведите курсором над изображением (Вы получите сообщение об ошибке при использовании JavaScript 1.0 броузера - скоро мы увидим, как это предотвратить):
Исходный текст для этого примера выглядит следующим образом:
<a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>
Однако этот код вызывает некоторые проблемы:
Теперь мы посмотрим на законченный сценарий, который решает эти проблемы. Сценарий стал намного более длинным, но написав его однажды, Вы не должны больше беспокоиться относительно этих проблем.
Имеются два требования для сохранения гибкости этого сценария:
Здесь Вы можете видеть, как работает код:
Взгляните на код (я добавил некоторые комментарии):
<html> <head>
<script language="JavaScript"> <!-- hide
// ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ******************************************************
// ok, we have a JavaScript browser var browserOK = false; var pics;
// --> </script>
<script language="JavaScript1.1"> <!-- hide
// JavaScript 1.1 browser - oh yes! browserOK = true; pics = new Array();
// --> </script>
<script language="JavaScript"> <!-- hide
var objCount = 0; // number of (changing) images on web-page
function preload(name, first, second) {
// preload images and place them in an array
if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } }
function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } }
function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } }
// preload images - you have to specify which images should be preloaded // and which Image-object on the wep-page they belong to (this is the first // argument). Change this part if you want to use different images (of course // you have to change the body part of the document as well)
preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif");
// --> </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>
Этот сценарий помещает все изображения в массив 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
