Изменение изображений по событиям, инициированных пользователем
Вы можете создавать хорошие эффекты через изменение изображений при реакции на некоторые события. Вы можете например изменять изображения, когда курсор мыши передвигается поверх некоторой области. Исходный текст для этого примера выглядит следующим образом:
<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>
Однако этот код вызывает некоторые проблемы:
- Пользователь может использовать броузер ниже JavaScript 1.1.
- Второе изображение предварительно не загружено.
- Мы должны перезаписать код для каждого изображения на web-странице.
- Нам нужен сценарий, который может использоваться во многих web-страницах много раз без существенных изменений.
Теперь мы посмотрим на законченный сценарий, который решает эти проблемы. Сценарий стал намного более длинным, но написав его однажды, вы не должны больше беспокоиться относительно этих проблем.
Имеются два требования для сохранения гибкости этого сценария:
- Неопределенное число изображений – не имеет значение, используется 10 или 100 изображений
- Неопределенный порядок изображений – это необходимо для того, чтобы изменить порядок изображений не изменяя код.
Взгляните на код (добавлены некоторые комментарии):
<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 и ваши посетители или покупатели наверняка возвратятся.