Читать «Введение в 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]) {

// вернуть в исходное систо\яние все другие изображени\я