Читать «Введение в JavaScript для Мага» онлайн - страница 30
Стефан Кох
Исходный код этого примера выглядит следующим образом:
<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, у нас браузер с поддержкой JavaScript
var browserOK = false;
var pics;
// — >
</script>
<script language="JavaScript1.1">
<!- hide
// браузер с поддержкой JavaScript 1.1!
browserOK = true;
pics = new Array();
// — >
</script>
<script language="JavaScript">
<!- hide
var objCount = 0; // количество изображений на web-странице
function preload(name, first, second) {
// предварительна\я загрузка изображений и размещение их в массиве
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]) {
// вернуть в исходное систо\яние все другие изображени\я