Эффект может встречаться в различных вариантах, самые распространённые из которых - это:
Несмотря на внешне различное проявление этих эффектов, все они
реализованы схожим образом и отличаются лишь в мелочах. Давайте по
порядку разберём каждый из этих вариантов.
Подсвечивание пунктов меню
Наиболее часто встречающаяся реализация эффекта 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), высоте (height), поясняющему тексту (alt) и
т.д. В нашем же случае достаточно будет изменить только ссылку на
картинку, т.к. изображения "обычной" и "нажатой" кнопки имеют
одинаковые размеры.
Все необходимые знания для написания функции у нас уже есть, так что
приступим. Вот код на JavaScript, который осуществляет подмену
изображений. В качестве параметров мы передаём ему имя рисунка и ссылку
на изображение "нажатой" (или "отжатой") кнопки:
function change(img, ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
О способе определения типа и версии броузера подробно написано в первой статье цикла о JavaScript.
Бегающий указатель
Чем отличаются варианты RollOver с "подсвечиванием пунктов меню" и
"бегающим указателем"? Только тем, что во втором случае у нас есть
всего две картинки, используемые для всех пунктов меню - пустая и с
изображением указателя. Пример использования данного эффекта можно
посмотреть вот здесь.
В этом варианте RollOver нам придется слегка изменить HTML-код,
описывающий меню, т.к. перед каждым пунктом меню мы добавляем
изображение пустого указателя:
<img src="pic/pointer.gif" name="pic1"><a
href="news.htm" onmouseover="over('pic1');"
onmouseout="out('pic1');"><img src="pic/pic-1.gif"></a>
Обратите внимание на несколько особенностей. Во-первых, вместо одной
функции смены изображения нам понадобятся две, т.к. действия,
производимые при попадании курсора в область пункта меню и покидании
её, слегка отличаются. Мы назовём эти функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name тега <img> переместился из описания пункта меню в описание указателя - ведь теперь мы подсвечиваем не меню, а указатель!
Число параметров, передаваемых функциям, можно сократить -
достаточно ограничиться именем картинки (атрибут name), т.к. ссылки на
изображения, формирующие указатель, нам известны заранее. Код,
осуществляющий необходимые действия, теперь выглядит так:
function over(img) {
if (browser_ok == 'true') {
document.images[img].src = "pic/pointer-on.gif";
}
}
function out(img) {
if (browser_ok == 'true') {
document.images[img].src = "pic/pointer.gif";
}
}
Осталось разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...
Сменяющаяся картинка
Пример использования данного эффекта можно наблюдать непосредственно на моём собственном сайте.
Его отличие от ранее рассмотренных вариантов заключается в том, что
используется всего одна картинка, которую мы изменяем, но вариантов
замены больше, чем два. Необходимо также отметить, что скрипт может
вызываться из одной части странички, а смена картинки происходить
совершенно в другой.
Как и в предыдущем случае, начнём с корректировки HTML-кода. В
данном варианте он будет состоять из двух фрагментов: описание
изображения, которое будет меняться, и описание областей, при попадании
на которые вызывается скрипт. Это может быть, к примеру, то же самое
меню:
<img src="pic/default.gif" name="pic">
...
<a href="page_1.htm" onmouseover="over('pic/image-1.gif');"
onmouseout="out();"><img
src="pic/pic-1.gif"></a><br>
<a href="page_2.htm" onmouseover="over('pic/image-2.gif');"
onmouseout="out();"><img
src="pic/pic-2.gif"></a><br>
<a href="page_3.htm" onmouseover="over('pic/image-3.gif');" onmouseout="out();"><img src="pic/pic-3.gif"></a>
Соответственно, придётся скорректировать и поведение функций. В функцию over(),
которая вызывается в результате попадания курсора в активную область,
достаточно передать только ссылку на заменяющее изображение. Вызов же
функции out() осуществляется и вовсе без параметров:
function over(ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
function out() {
if (browser_ok == 'true') {
document.images[img].src = "pic/default.gif";
}
}
Вот мы и разобрались со всеми вариантами скриптов для реализации
эффекта RollOver. Но подождите ещё немножко, т.к. осталось рассмотреть
ещё один очень важный вопрос:
Предварительная загрузка изображений
Я специально выделил этот момент в отдельный подраздел, т.к. он
очень важен и сильно сказывается на качестве эффекта и визуальной
загрузке странички.
Для чего используется предварительная загрузка изображений? Ответ
лежит в самом механизме работы интернет - как известно, любая страничка
состоит из набора файлов, которые загружаются одновременно с основной
страничкой. Но есть одна особенность - загружаются только картинки,
которые видны на экране. Наш же эффект построен на подмене изображений
и, соответственно, часть картинок при загрузке не видна.
Предварительная загрузка заключается в том, что мы заранее скачиваем
невидимые картинки в кэш компьютера. Если предзагрузка не используется,
то при смене картинки будет происходить заметная задержка - связанная с
тем, что картинка будет загружаться непосредственно с сервера.
Механизм предварительной загрузки изображений осуществляется при помощи следующего фрагмента кода:
if (browser_ok == 'true') {
a1=new Image; a1.src="pic/pic-1-on.gif";
a2=new Image; a2.src="pic/pic-2-on.gif";
a3=new Image; a3.src="pic/pic-3-on.gif";
}
Мы просто создаём объект Image для каждой невидимой в данный момент
картинки и указываем адрес изображения. Это приводит к тому, что, дойдя
до этого фрагмента кода, броузер инициирует загрузку изображений точно
так же, как и для обычных видимых картинок. К концу загрузки странички
абсолютно все картинки, её составляющие, находятся в кэше, и от этого
будут загружаться мгновенно.
Приведённым выше способом необходимо скэшировать все невидимые на
страничке картинки. Обратите также внимание, что я осуществляю проверку
корректности броузера, и в случае, если это достаточно старая версия,
которая не поддерживает смену изображений, то лишняя графика просто не
грузится - тем самым несколько ускоряя загрузку странички.
При грамотной нарезке страничек сайта мы можем использовать часть
изображений первой страницы во внутренних. Подобный механизм реализован
на моём собственном сайте (www.cherry-design.spb.ru).
Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся
необходимая графика грузится на первой страничке и открытие внутренних
разделов сайта происходит почти мгновенно. В частности, оказываются уже
загруженными фрагменты логотипа разных цветов и графика, составляющая
пункты меню.
Надеюсь, что приведённые выше скрипты и описание механизма их работы
покажутся Вам полезными и, используя их, Вы сможете реализовать свои
задумки.
Архив с примерами скриптов, рассмотренных в данной статье, можно взять отсюда. (Материал с www.cherry-design.spb.ru)
| 
