Только что продемонстрированный фрагмент содержит один тег <script> и два атрибута обработчиков событий с JavaScript_кодом, чтобы реализовать единст_ венный эффект смены изображений. Это прекрасный пример навязчивого Java_ Script_кода. Хотя примеры смешения представления (HTML_разметка) с поведе_ нием (JavaScript_код) встречаются не так уж редко, лучше избегать такой прак_ тики, если такая возможность есть. Особенно в случаях, когда JavaScript_код за_ трудняет понимание HTML_кода. В примере 22.1 приводится функция, которая добавляет эффект смены изображений к указанному элементу <img>.
Пример 22.1. Добавление эффекта смены изображений
/**
* Добавляет эффект смены изображений к заданному тегу <img>, вставляя обработчики
* событий, которые будут изменять URL_адрес изображения при наведении указателя мыши.
550 Глава 22. Работа с графикой на стороне клиента
*
* Если аргумент img содержит строку, выполняется поиск элемента
* по значению атрибута id или name.
*
* Это метод устанавливает свойства обработчиков событий onmouseover
* и onmouseout в указанный элемент, перекрывая и отключая любые обработчики,
* определенные в этих свойствах ранее.
*/
function addRollover(img, rolloverURL) {
if (typeof img == "string") { // Если img _ это строка,
var id = img; // значит, это id, а не объект Image
img = null; // и потому у нас еще нет объекта.
// Прежде всего, необходимо отыскать изображение по атрибуту id if (document.getElementById) img = document.getElementById(id); else if (document.all) img = document.all[id];
// Если по атрибуту id отыскать не удалось, попробовать отыскать
// по атрибуту name.
if (!img) img = document.images[id];
// Если не удалось найти изображение, ничего не делать и тихо выйти if (!img) return;
}
// Если элемент найден, но это не тег <img>, также ничего больше не делать if (img.tagName.toLowerCase() != "img") return;
// Запомнить первоначальный URL_адрес изображения
var baseURL = img.src;
// Загрузить сменное изображение в кэш броузера (new Image()).src = rolloverURL;
Функция addRollover(), объявленная в примере 22.1, «не совсем» ненавязчивая, потому что для ее использования по_прежнему требуется включать в HTML_код сценарий, который вызывал бы эту функцию. Для достижения поставленной це_ ли – сделать реализацию эффекта смены изображений по_настоящему ненавяз_ чивой – необходимо каким_то образом без JavaScript_кода указать, какие изо_ бражения должны меняться, и задать URL_адреса сменных изображений. Са_ мый простой способ – включить в теги <img> ложные атрибуты. Например, изо_ бражение с эффектом смены можно обозначить так:
Используя такое соглашение по оформлению изображений, можно без труда оты_ скать все изображения, которые должны меняться, и настраивать реализацию эффекта с помощью функции initRollovers() – ее определение приводится в при_ мере 22.2.
Пример 22.2. Добавление эффектов смены изображений ненавязчивым образом
/**
* Находит все теги <img> в документе, которые имеют атрибут "rollover".
22.1. Работа с готовыми изображениями
* Значение этого атрибута используется как URL_адрес сменного изображения,
* выводимого, когда указатель мыши наводится на изображение;
* устанавливает соответствующие обработчики событий, с помощью
* которых воспроизводится эффект смены изображений.
*/
function initRollovers() {
var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++) {
var image = images[i];
var rolloverURL = image.getAttribute("rollover"); if (rolloverURL) addRollover(image, rolloverURL);
}
}
Все, что осталось сделать, – это гарантировать запуск метода initRollovers() по_ сле загрузки документа. Следующий программный код должен работать в совре_ менных броузерах:
if (window.addEventListener) window.addEventListener("load", initRollovers, false);
else if (window.attachEvent) window.attachEvent("onload", initRollovers);
Более подробное обсуждение обработчика события onload вы найдете в главе 17.
Обратите внимание: если объединить функции addRollover() и initRollovers() в одном файле с программным кодом, выполняющим регистрацию обработчика события, получится полностью ненавязчивое решение по реализации эффекта смены изображений. Все, что необходимо для получения эффекта смены изобра_ жений, –просто подключить получившийся файл с программным кодом в теге <script src=> и вставить атрибут rollover в необходимые теги <img>.
Если необходимо соблюсти строгое соответствие HTML_файлов стандартам язы_ ка разметки, а потому нельзя использовать нестандартный атрибут rollover в те_ гах <img>, перейдите на XHTML и задействуйте для нового атрибута пространст_ во имен XML. В примере 22.3 демонстрируется версия функции initRollovers(), различающая пространства имен. Однако следует отметить, что эта версия функции не работает в Internet Explorer 6, потому что этот броузер не восприни_ мает DOM_методы, которые поддерживают пространств имен.
Пример 22.3. Инициализация эффекта смены изображений средствами XHTML с использованием пространств имен
/**
* Находит все теги <img> в документе, которые имеют атрибут "ro:src".
* Значение этого атрибута используется как URL_адрес сменного изображения, выводимого,
* когда указатель мыши наводится на изображение, и устанавливает соответствующие
* обработчики событий, с помощью которых достигается эффект смены изображений.
* Префикс ro: пространства имен должен отображаться на URI_адрес
* "http://www.davidflanagan.com/rollover"
*/
function initRollovers() {
var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++) {
var image = images[i];
552 Глава 22. Работа с графикой на стороне клиента
var rolloverURL = image.getAttributeNS(initRollovers.xmlns, "src"); if (rolloverURL) addRollover(image, rolloverURL);
}
}
// Это вымышленный URI_адрес для нашего пространства имен "ro:" initRollovers.xmlns = "http://www.davidflanagan.com/rollover";
