Графика и обработка событий

Вданном разделе речь не пойдет об обработчиках событий контейнера IMG. Мы просто рассмотрим наиболее типичный способ комбинирования обработчиков событий и изменения графических образов. Собственно не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий от мыши и изменением картинок:

<table border=0 cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img src=../images/main/treeup.gif width=20 height=20 border=0></td>
<td><img src=../images/main/blank.gif width=20 height=20 border=0></td>
</tr>
<tr>
<td><img src=../images/main/treetc.gif width=20 height=20 border=0></td>
<td><a href="javascript:void(0);" onMouseover="document.manual.src='../images/jsi/manualb.gif';return true;" onMouseout="document.manual.src='../images/jsi/manual.gif';return true;"><img name=manual src=../images/jsi/manual.gif border=0 width=20 height=20></a></td>
</tr>
<tr>
<td><img src=../images/main/treetc.gif width=20 height=20 border=0></td>
<td><a href="javascript:void(0);" onMouseover="document.desk.src='../images/jsi/deskb.gif';return true;" onMouseout="document.desk.src='../images/jsi/desk.gif';return true;"><img name=desk src=../images/jsi/desk.gif border=0 width=20 height=20></a></td>
</tr>
</table>

В данном примере при проходе мышки через картинки меню они изменяются. Этот эффект достигается за счет применения двух событий: onMouseover и onMouseout. По первому событию картинка меняется с позитива на негатив, по второму событию восстанавливается первоначальный вариант. Следует заметить, что события определены в контейнере якоря (A), а не в контейнере IMG. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.

Для разнообразия рассмотрим еще один пример. В нем мы будем менять статическую картинку при прохождении мыши по меню:

Скрытая картинка, кроме всего прочего, еще и контекстно-зависимая гипертекстовая ссылка. Картинка "запоминает" последнюю позицию меню, на которую указывала мышь. При этом поле формы служит для демонстрации этой контекстной зависимости. "Покликайте" на различные варианты картинки и на иконки меню. Посмотрите, что из этого получится.


начало страницы