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

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

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

    img.onmouseover = function() {

      this.src = this.getAttribute("data-rollover");

    };

    img.onmouseout = function() {

      this.src = this.getAttribute("data-rollout");

    };

  }

});