Изменение внешнего вида графических ссылок
В документе HTML, внешний вид которого показан на рис. 5.1, находятся две кнопки, созданные как растровые графические изображения. Они используются для активизации ссылок, соответствующих двум другим документам HTML.
Рис. 5.1. Кнопка с надписью АУРАМЕДИА изменила свой цвет
Если расположить курсор над одной из этих кнопок, надпись на этой кнопке изменит свой цвет. Это достигается динамической заменой графического изображения кнопки при помощи сценария JavaScript.
Обратите внимание на исходный текст документа HTML, показанный в листинге 5.1.
Листинг 5.1. Файл chapter5/grbutton/grbutton.html
<HTML>
<BODY BGCOLOR="#B0FFD8">
<FONT FACE="Arial, Helvetica" SIZE=1>
<P>
<A HREF="mainaur.htm"
onMouseOver="document.btn1.src='pic/aurap.gif'"
onMouseOut="document.btn1.src='pic/aura.gif'"><IMG
SRC="pic/aura.gif" NAME = "btn1" BORDER=0 ALT="Журнал Аурамедиа"</A>
<BR>
<A HREF="soft/default.htm"
onMouseOver="document.btn2.src='pic/softcatp.gif'"
onMouseOut="document.btn2.src='pic/softcat.gif'"><IMG
SRC="pic/softcat.gif" NAME = "btn2" BORDER=0 ALT="Soft-каталог"</A>
</LEFT>
</FONT>
</BODY>
</HTML>
Для создания ссылок мы воспользовались оператором <A>. Этот оператор использован здесь совместно с оператором <IMG>, поэтому ссылка отображается как графическое изображение.
Для оператора ссылки <A> мы определили обработчики событий onMouseOver и onMouseOut:
onMouseOver="document.btn1.src='pic/aurap.gif'"
onMouseOut="document.btn1.src='pic/aura.gif'"
Когда курсор мыши оказывается над ссылкой (то есть над графическим изображением ссылки), управление получает обработчик события onMouseOver. Этот обработчик загружает изображение pic/aurap.gif, где слово АУРАМЕДИА написано красным цветом (для второй кнопки в аналогичной ситуации загружается изображение pic/softcatp.gif).
После того как пользователь убирает курсор мыши с поверхности кнопки, в дело включается обработчик события onMouseOut. Он восстанавливает исходное изображение, указанное в параметре SRC оператора <IMG>.
