JavaScript: полезные функции
    Mike Melnikov
    Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание". Мне не кажется это название удачным, но все же, давайте приступим.
    Эффект может встречаться в различных вариантах, самые распространенные из которых это:
    подсвечивание пунктов меню
    бегающий указатель
    сменяющаяся картинка
    Несмотря на внешне различное проявление этих эффектов, все они реализованы схожим образом и отличаются лишь в мелочах. Давайте, по порядку разберем каждый из этих вариантов. Подсвечивание пунктов меню
    Наиболее часто встречающаяся реализация эффекта RollOver. Его основой является подмена картинки при наведении курсора мышки и возврат к первоначальной после того, как мышка ее покинет.
    Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в "отжатом" и "нажатом" состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.
    Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:
    

    

    
    Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали - такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.
    Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения:
    onMouseOver="change('pic1','pic/pic-1-on.gif');"
    А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами:
    onMouseOut="change('pic1','pic/pic-1.gif');"
    В первом случае мы указываем ссылку на изображение "нажатой кнопки", а во втором, соответственно, "отжатой" (или исходной картинки, что суть одно и тоже).
    Теперь напишем всю конструкцию полностью на примере одного пункта меню:
    
    Подобным образом необходимо обработать каждый пункт нашего меню. Отличие будет заключаться лишь в смене значения атрибута name, который для каждого пункта должен быть уникальным и соответствующей коррекции значений параметров в вызовах функций onMouseOver и onMouseOut.
    Перед тем, как перейти к написанию кода, поговорим о том, каким образом мы можем управлять изображениями на страничке.
    Броузер перед показом странички на экране, разбивает ее на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией:
    document.images["pic1"].src = "pic/pic-1-on.gif";
    Обратите внимание, что для ссылки на конкретное изображение (ведь на страничке их может быть много), мы используем имя картинки, которое указали в атрибуте name тега . ............