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