Введение в JavaScript для Мага

ОглавлениеДобавить в закладки К обложке

if (document.images[pics[i][2]]!= null)

if (name!= pics[i][2]) {

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

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, то мы обязаны сделать на этих изображениях еще и ссылки.

Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна).

Изображения — без сомнения могучее средство уличшения Вашей web-страницы. Объект Image дает Вам возможность создавать действительно сложные эффекты. Однако заметим, что не всякое изображение или программа JavaScript способно улучшить Вашу страницу. Если Вы пройдетесь по Сети, то сможете увидеть множество примеров, где изображения использованы самым ужасным способом. Не количество изображений делает Вашу web-страницу привлекательной, а их качество. Сама загрузка 50 килобайт плохой графики способна вызвать раздражение. При создании специальных эффектов с изображениями с помощью JavaScript помните об этом и ваши посетителями/клиентами будут чаще возвращаться на Ваши страницы.


-= 26 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня