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

 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: Ненавязчивая реализация эффекта смены изображений.

*

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

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

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

*

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

*

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

*/

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

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

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

 };

 }

});

21.2. Работа с аудио- и видеопотоками

Стандарт HTML5 определяет новые элементы

<audio>

<video>,

которые теоретически так же просты в использовании, как элемент

<img>

. В броузерах с поддержкой стандарта HTML5 больше не нужно использовать дополнительные расширения (такие как Flash), чтобы внедрить в свои HTML-документы аудио- и видеоклипы:

<audio src="background_music.mp3"/>

<video src="news.mov" width=320 height=240/>

Однако на практике работать с этими элементами несколько сложнее, чем было показано выше. Производители броузеров не смогли прийти к соглашению о стандарте на аудио- и видеокодеки, которые поддерживались бы всеми броузерами, вследствие чего обычно приходится использовать элементы

<source>,

чтобы указать несколько источников мультимедийных данных в различных форматах:

<audio id="music">

 <source src="music.mp3" type="audio/mpeg">

 <source src="music.ogg" type='audio/ogg; codec="vorbis">

</audio>

Обратите внимание, что элементы

<source>

не имеют содержимого: они не имеют закрывающего тега </source>, и от вас не требуется завершать их последовательностью символов

/>

Броузеры, поддерживающие элементы

<audio>

<video>,

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

<object>,

который вызывает расширение Flash):