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

Флэнаган Дэвид

21.1. Работа с готовыми изображениями

Готовые изображения могут включаться в веб-страницы с помощью тега

<img>.

Подобно любому HTML-элементу, элементом

<img>

можно управлять: присваивание нового URL-адреса свойству

sгс

заставляет броузер загрузить (если необходимо) и отобразить новое изображение. (Кроме того, можно изменять ширину и высоту изображения, заставляя броузер увеличивать или уменьшать его, но этот прием здесь не рассматривается.)

Возможность динамической замены одного изображения другим в HTML-документе

открывает доступ к некоторым специальным эффектам. На практике чаще всего прием смены изображений привязывается к наведению указателя мыши на изображение. Когда изображение размещается внутри гиперссылки, смена изображения становится приглашением пользователю щелкнуть на изображении. (Аналогичный эффект можно получить с помощью псевдокласса CSS

:hover

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

<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);

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

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