JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

<img src="images/help.gif"

onmouseover="this.src='images/help_rollover.gif'"

onmouseout="this.src='images/help.gif'">

Обработчики событий в элементе

<img>
изменяют значение свойства
src
, когда указатель мыши наводится на изображение или покидает его границы. Эффект смены изображений отчетливо связывается с возможностью щелкнуть на изображении, поэтому такие элементы
<img>
следует заключать в элементы
<а>
или передавать обработчику события
onclick
.

Чтобы радовать глаз, эффект смены изображений (и родственные ему эффекты) должен иметь минимальное время отклика. Это означает, что необходим некоторый способ, гарантирующий предварительную загрузку всех необходимых изображений в кэш броузера. Для этой цели в клиентском JavaScript имеется специальный прикладной интерфейс: чтобы принудительно поместить изображение в кэш, нужно сначала создать объект

Image
с помощью конструктора
Image.
Затем, записав в свойство
src
требуемый URL-адрес, загрузить изображение. Это изображение не будет добавлено в документ, поэтому, хотя изображение будет невидимо, броузер загрузит его и поместит в свой кэш. Позднее, когда тот же URL-адрес будет использоваться для изменения изображения, находящегося на экране, изображение быстро загрузится из кэша броузера.

Приведенный выше фрагмент разметки, воспроизводящий эффект смены изображений, не выполняет предварительную загрузку изображений, поэтому пользователь может заметить задержку при смене изображения, когда первый раз наведет на него указатель мыши. Чтобы исправить ситуацию, необходимо немного изменить разметку:

<script>(new Image).src = "images/help_rollover.gif";</script>

<img src="images/help.gif"

onmouseover="this.src='images/help_rollover.gif

onmouseout="this.src='images/help.gif "*>

21.1.1. Ненавязчивая реализация смены изображений

Только что продемонстрированный фрагмент содержит один элемент

<script>
и два атрибута обработчиков событий с JavaScript-кодом для реализации единственного эффекта смены изображений. Это прекрасный пример навязчивого Java-Script-кода: объем программного кода достаточно велик, чтобы осложнить чтение разметки HTML. В примере 21.1 приводится ненавязчивая альтернатива, позволяющая выполнять смену изображений простым добавлением атрибута
data-rollover
(раздел 15.4.3) к любому элементу
<img>.
Обратите внимание, что в этом примере используется функция
onLoad
из примера 13.5. В нем также используется массив
document.images[]
(раздел 15.2.3), в котором хранятся ссылки на все элементы
<img>
в документе.

Пример 21.1. Ненавязчивая реализация эффекта смены изображений

/**

* rollover.js: Ненавязчивая реализация эффекта смены изображений.

*

* Для создания эффекта смены изображений подключите этот модуль к своему HTML-файлу

* и используйте атрибут data-rollover в элементах <img>, чтобы определить URL-адрес

* сменного изображения. Например:

*

* <img src="normal_image.png" data-rollover="rollover_image.png">

*

* Обратите внимание, что для работы этого модуля необходимо подключить onLoad.js

*/

onLoad(function { // Все в одной анонимной функции: не определяет имен

// Цикл по всем изображениям, отыскивает атрибут data-rollover

for(var і = 0; і < document.images.length; i++) {

var img = document.images[i];

var rollover = img.getAttribute("data-rollover");

if (!rollover) continue; // Пропустить изображения без data-rollover

// Обеспечить загрузку сменного изображения в кэш

(new Image).src = rollover;

// Определить атрибут для сохранения URL-адреса

// изображения по умолчанию

img.setAttribute("data-rollout", img.src);

// Зарегистрировать обработчики событий,

// создающие эффект смены изображений