Традиционный прием смены изображений

Главная особенность объекта Image заключается в том, что его свойство src дос_ тупно и для чтения, и для записи. Прочитав значение этого свойства, можно по_ лучить URL_адрес, с которого было загружено изображение. Еще важнее то, что можно установить свойство src и тем самым заставить броузер загрузить и ото_ бразить новое изображение на том же месте.

Возможность динамической замены одного изображения другим в HTML_доку_ менте открывает доступ к любым специальным эффектам, начиная от анимации и заканчивая цифровыми часами, которые сами обновляются в режиме реально_ го времени. На практике чаще всего этот прием смены изображений реализует_ ся, когда указатель мыши наводится на изображение. (Чтобы избежать непри_ ятных визуальных эффектов, новое изображение должно иметь те же размеры, что и предыдущее.) Когда изображение размещается внутри тега гиперссылки, эффект смены изображений является мощным побудительным мотивом, при_ глашающим пользователя щелкнуть на изображении.¹ Следующий фрагмент HTML_кода выводит изображение в теге <a> и с помощью обработчиков событий onmouseover и onmouseout создает эффект смены изображений:

<a href="help.html" onmouseover="document.helpimage.src='images/help_rollover.gif';" onmouseout="document.helpimage.src='images/help.gif';">

<img name="helpimage" src="images/help.gif" border="0"> </a>

Обратите внимание: в этом фрагменте тег <img> имеет атрибут name, что облегчает обращение к соответствующему объекту Image из обработчиков событий тега <a>. Установка атрибута border препятствует появлению синей рамки гиперссылки вокруг изображения. Все необходимое выполняется в обработчиках событий тега <a>: они меняют выводимое изображение, просто записывая в свойство src URL_ адрес требуемого изображения. Чтобы эффект наблюдался и в старых броузерах,

¹ Обсуждение эффекта смены изображений не будет полным, если не упомянуть, что этот эффект может быть реализован с помощью CSS_псевдокласса :hover, из_ меняющего различные фоновые CSS_изображения в элементах, на которые наво_ дится указатель мыши. К сожалению, реализация смены изображений на базе CSS сопряжена с трудностями, обусловленными несовместимостью броузеров. На практике псевдокласс :hover чаще используется для создания эффектов в тексто_ вых, а не графических гиперссылках.

в которых обработчики этих событий поддерживаются только в отдельных тегах, таких как <a>, обработчики событий были помещены в тег <a>. Практически

в любом современном броузере обработчики событий могут включаться непо_ средственно в тег <img>, что упрощает поиск объекта Image. В этом случае обработ_ чик события мог бы сослаться на объект Image с помощью ключевого слова this:

<img src="images/help.gif" onmouseover="this.src='images/help_rollover.gif'" onmouseout="this.src='images/help.gif'">

Эффект смены изображений обычно означает возможность щелкнуть на изобра_ жении, поэтому такого рода теги <img> должны заключаться в тег <a> или преду_ сматривать обработчик события onclick.