Web-инжиниринг

       

Event


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

Вданном разделе речь не пойдет об обработчиках событий контейнера IMG. Мы просто рассмотрим наиболее типичный способ комбинирования обработчиков событий и изменения графических образов.

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

<table 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. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.


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

onMouseover="muzik_flag=1;document.muzik.src='../images/jsi/muzik1.gif';return true;"

onMouseout="document.muzik.src='../images/main/blank.gif';return true;"

>
onMouseover="window.muzik();return true;"

onMouseout="document.muzik.src='../images/main/blank.gif';return true;"

>


onMouseover="muzik_flag=2;document.muzik.src='../images/jsi/muzik2.gif';return true;"

onMouseout="document.muzik.src='../images/main/blank.gif';return true;"

>
onMouseover="muzik_flag=3;document.muzik.src='../images/jsi/muzik0.gif';return true;"

onMouseout="document.muzik.src='../images/main/blank.gif';return true;"

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


Содержание раздела