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

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

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

Оглавление книги