Библиотека Интернет Индустрии I2R.ru

Эффект может встречаться в различных вариантах, самые распространённые из которых - это:

• подсвечивание пунктов меню
• бегающий указатель
• сменяющаяся картинка

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

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

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

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

Начнём с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:

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

Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения:

А для отслеживания ухода курсора с изображения на помощь придёт событие onMouseOut, которое также вызывает функцию смены изображения, но уже с другими параметрами:

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

Теперь напишем всю конструкцию полностью на примере одного пункта меню:

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

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

Как я писал в одной из более ранних статей, броузер перед показом странички на экране разбивает её на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией:

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

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

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

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

Бегающий указатель

Чем отличаются варианты RollOver с "подсвечиванием пунктов меню" и "бегающим указателем"? Только тем, что во втором случае у нас есть всего две картинки, используемые для всех пунктов меню - пустая и с изображением указателя. Пример использования данного эффекта можно посмотреть вот здесь.

В этом варианте RollOver нам придется слегка изменить HTML-код, описывающий меню, т.к. перед каждым пунктом меню мы добавляем изображение пустого указателя:

Обратите внимание на несколько особенностей. Во-первых, вместо одной функции смены изображения нам понадобятся две, т.к. действия, производимые при попадании курсора в область пункта меню и покидании её, слегка отличаются. Мы назовём эти функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name тега

Число параметров, передаваемых функциям, можно сократить - достаточно ограничиться именем картинки (атрибут name), т.к. ссылки на изображения, формирующие указатель, нам известны заранее. Код, осуществляющий необходимые действия, теперь выглядит так:

Осталось разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...

Сменяющаяся картинка

Пример использования данного эффекта можно наблюдать непосредственно на моём собственном сайте.

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

Как и в предыдущем случае, начнём с корректировки HTML-кода. В данном варианте он будет состоять из двух фрагментов: описание изображения, которое будет меняться, и описание областей, при попадании на которые вызывается скрипт. Это может быть, к примеру, то же самое меню:

Соответственно, придётся скорректировать и поведение функций. В функцию over(), которая вызывается в результате попадания курсора в активную область, достаточно передать только ссылку на заменяющее изображение. Вызов же функции out() осуществляется и вовсе без параметров:

Вот мы и разобрались со всеми вариантами скриптов для реализации эффекта RollOver. Но подождите ещё немножко, т.к. осталось рассмотреть ещё один очень важный вопрос:

Предварительная загрузка изображений

Я специально выделил этот момент в отдельный подраздел, т.к. он очень важен и сильно сказывается на качестве эффекта и визуальной загрузке странички.

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

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

Механизм предварительной загрузки изображений осуществляется при помощи следующего фрагмента кода:

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

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

При грамотной нарезке страничек сайта мы можем использовать часть изображений первой страницы во внутренних. Подобный механизм реализован на моём собственном сайте (www.cherry-design.spb.ru). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика, составляющая пункты меню.

Надеюсь, что приведённые выше скрипты и описание механизма их работы покажутся Вам полезными и, используя их, Вы сможете реализовать свои задумки.

Архив с примерами скриптов, рассмотренных в данной статье, можно взять отсюда.