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

Mouse


Обработка событий Mouseover и Mouseout

Эти два события являются наиболее часто используемыми среди всех событий, которые обрабатываются на страницах Web. Именно они позволяют обесцвечивать или наоборот, проявлять картинки, или менять содержание поля status. Первое событие генерируется браузером, если мышка указывает на гипертекстовую ссылку, а второе - когда мышка покидает гипертекстовую ссылку. Рассмотрим пример с записной книжкой, но только для проявления меню второго уровня мы будем использовать обработчик события onMouseover:



line2(0);

<table cellspacing=1 cellpadding=0 align=center>

<tr>

<td>

<a href="javascript:void(0);"

onMouseover="line2(0);return true;">

<img src=../images/jsi/addrpho.gif border=0></a></td>

...

</tr>

</table>

В качестве обработчика события мы вызываем функцию line2(), которая идентична line1() из предыдущего примера. В примере IMG перенесен на новую строку для наглядности. На самом деле этого делать не следует - при интерпретации html-parser-ом могут появиться неучтенные пропуски, которые не предусмотрены автором страницы.

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

onMouseover="window.document.main.document.tiger.src='../images/jsi/tiger1s.gif';return true;"

onMouseout="window.document.main.document.tiger.src='../images/jsi/tiger1g.gif';return true;">

onMouseover="window.document.main.document.ziraf.src='../images/jsi/ziraf1s.gif';return true;"

onMouseout="window.document.main.document.ziraf.src='../images/jsi/ziraf1g.gif';return true;">

onMouseover="window.document.main.document.rept.src='../images/jsi/rept1s.gif';return true;"

onMouseout="window.document.main.document.rept.src='../images/jsi/rept1g.gif';return true;">

onMouseover="window.document.main.document.duck.src='../images/jsi/duck1s.gif';return true;"

onMouseout="window.document.main.document.duck.src='../images/jsi/duck1g.gif';return true;">

<
<a href="javascript:void(0);"

onMouseover="document.tiger.src='../images/jsi/tiger1s.gif';return true;"

onMouseout="document.tiger.src='../images/jsi/tiger1g.gif';return true;">

<img name=tiger src=../images/jsi/tiger1g.gif border=0>

</a>

В предыдущем примере мы не обсудили использование функции return. При работе с графикой значение, которое возвращает обработчик события, на результат отображения не влияет. Но если изменять значение поля статуса браузера, то изменения произойдут только в случае возврата значения true. Для более детального ознакомления прочтите материал раздела "Поле статуса"


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