JavaScript RollOver

Добавлено пользователем 08.02.2016

303247С английского этот термин переводят как перекатывание. Этот эффект встречается в различных вариантах:
• бегающий указатель;
• сменяющаяся картинка;
• подсвечивание пунктов меню;

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

В его основе лежит подмена изображения во время наведения курсором мышки и последующий возврат к изначальному состоянию, когда мышка покинет пределы изображения. Сначала рисуют каждую кнопку меню в двух вариантах: нажатое и отжатое положение. Для того чтобы отследить попадание курсора на изображение используется событие JavaScript onMouseOver. К нему привязывается вызов функции, которая меняет картинку. Для того чтобы отследить уход курсора используют событие onMouseOut, которое вызывает функцию смены изображения, но уже используя другие параметры.

В первом случае указывается картинка «нажатой кнопки», а во второй, соответственно «отжатой». Подобным образом, обрабатываются все пункты меню. Отличие состоит только в смене атрибута name. Для каждого пункта этот атрибут должен быть уникальным. Бегающий указатель Чем отличается этот вариант RollOver от «подсвечивания пунктов меню»? В этом случае используется только два изображения. На первом находится изображение указателя, а второй пустой. Сменяющаяся картинка Этот вариант отличается от предыдущих вариантов использованием лишь одной картинки, которую изменяют, но вариантов замены больше двух. Следует заметить, что скрипт можно вызывать в одно части страницы, а изображение может менять в другой части.

Похожие посты:

Свойства объекта javascript window
История развития технологии javascript
Общие события веб-страницы