Вданном разделе речь не пойдет об обработчиках событий контейнера IMG. Мы просто рассмотрим наиболее типичный способ комбинирования обработчиков событий и изменения графических образов. Собственно не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий от мыши и изменением картинок:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
В данном примере при проходе мышки через картинки меню они изменяются. Этот эффект достигается за счет применения двух событий: onMouseover и onMouseout. По первому событию картинка меняется с позитива на негатив, по второму событию восстанавливается первоначальный вариант. Следует заметить, что события определены в контейнере якоря (A), а не в контейнере IMG. Это наиболее устойчивый с точки зрения совместимости браузеров вариант.
Для разнообразия рассмотрим еще один пример. В нем мы будем менять статическую картинку при прохождении мыши по меню:
![]() |
![]() |
![]() |
|
![]() |
Скрытая картинка, кроме всего прочего, еще и контекстно-зависимая гипертекстовая ссылка. Картинка "запоминает" последнюю позицию меню, на которую указывала мышь. При этом поле формы служит для демонстрации этой контекстной зависимости. "Покликайте" на различные варианты картинки и на иконки меню. Посмотрите, что из этого получится.