Подсвечивание пунктов меню

Наиболее часто встречающаяся реализация эффекта RollOver. Его основой является подмена картинки при наведении курсора мышки и возврат к первоначальной после того, как мышка ее покинет. Данный эффект в действии можно посмотреть вот на этом сайте.

Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в "отжатом" и "нажатом" состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.

Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так: <a href=""><img src="pic/pic-1.gif" name="pic1"></a><br> <a href=""><img src="pic/pic-2.gif" name="pic2"></a><br> <a href=""><img src="pic/pic-3.gif" name="pic3"></a>

Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали - такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.

Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения: onMouseOver="change('pic1','pic/pic-1-on.gif');"

А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами: onMouseOut="change('pic1','pic/pic-1.gif');"

В первом случае мы указываем ссылку на изображение "нажатой кнопки", а во втором, соответственно, "отжатой" (или исходной картинки, что суть одно и тоже).

Теперь напишем всю конструкцию полностью на примере одного пункта меню: <a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');" onMouseOut="change('pic1','pic/pic-1.gif');"><img src="pic/pic-1.gif" name="pic1"></a>

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

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

Как я писал в одной из более ранних статей, броузер перед показом странички на экране, разбивает ее на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией: document.images["pic1"].src = "pic/pic-1-on.gif";

Обратите внимание, что для ссылки на конкретное изображение (ведь на страничке их может быть много), мы используем имя картинки, которое указали в атрибуте name тега <img>. В данном примере, мы изменили изображение обычной кнопки, на ее "нажатый" вариант.

Точно таким же образом, мы можем обратиться и к другим атрибутам картинки: ширине (width), высоте (heigth), поясняющему тексту (alt) и т.д. В нашем же случае достаточно будет изменить только ссылку на картинку, т.к. изображения "обычной" и "нажатой" кнопки имеют одинаковые размеры.

Все необходимые знания для написания функции у нас уже есть, так что приступим. Вот код на JavaScript, который осуществляет подмену изображений. В качестве параметров мы передаем ему имя рисунка и ссылку на изображение "нажатой" (или "отжатой") кнопки: function change(img, ref) { if (browser_ok == 'true') { document.images[img].src = ref; } }

О способе определения типа и версии броузера, подробно написано в первой статье цикла о JavaScript.

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