Читать «Введение в JavaScript для Мага» онлайн - страница 31
Стефан Кох
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систо\яние все изображени\я
if (document.images[pics[i][2]]!= null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// заранее загружаемые изображени\я — Вы должны здесь указать
// изображени\я, которые нужно загрузить заранее, а также объект Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображени\ям (конечно это не освобождает
// Вас от об\язанности подредактировать в документе также и раздел body)
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. Первое из них — это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел <body>, то обнаружите изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.
Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
