JavaScript: полезные функции
Mike Melnikov
Эффект,
который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И
заключается он в смене изображения при наведении на него мышкой. Часто можно
слышать английское название эффекта - RollOver, что обычно переводят как
"перекатывание". Мне не кажется это название удачным, но все же,
давайте приступим.
Эффект
может встречаться в различных вариантах, самые распространенные из которых это:
подсвечивание
пунктов меню
бегающий
указатель
сменяющаяся
картинка
Несмотря
на внешне различное проявление этих эффектов, все они реализованы схожим
образом и отличаются лишь в мелочах. Давайте, по порядку разберем каждый из
этих вариантов.
Подсвечивание пунктов меню
Наиболее
часто встречающаяся реализация эффекта RollOver. Его основой является подмена
картинки при наведении курсора мышки и возврат к первоначальной после того, как
мышка ее покинет.
Для
начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в
"отжатом" и "нажатом" состояниях. Будем считать, что это
уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную
нам функциональность.
Начнем
с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:
Это
обычное меню, составленное из графических элементов. Я опустил несущественные
для понимания детали - такие как указание высоты и ширины изображения, тег ALT
и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который
понадобится для ссылки на картинку.
Теперь
мы немного модифицируем меню, добавив в него вызов функций смены изображения.
Для отслеживания попадания курсора мышки на изображение мы воспользуемся
событием onMouseOver и привяжем к нему вызов функции смены изображения:
onMouseOver="change('pic1','pic/pic-1-on.gif');"
А
для отслеживания ухода курсора с изображения, на помощь придет событие
onMouseOut которое также вызывает функцию смены изображения, но уже с другими
параметрами:
onMouseOut="change('pic1','images/referat/76674-1.gif');"
В
первом случае мы указываем ссылку на изображение "нажатой кнопки", а
во втором, соответственно, "отжатой" (или исходной картинки, что суть
одно и тоже).
Теперь
напишем всю конструкцию полностью на примере одного пункта меню:
Подобным
образом необходимо обработать каждый пункт нашего меню. Отличие будет
заключаться лишь в смене значения атрибута name, который для каждого пункта
должен быть уникальным и соответствующей коррекции значений параметров в
вызовах функций onMouseOver и onMouseOut.
Перед
тем, как перейти к написанию кода, поговорим о том, каким образом мы можем
управлять изображениями на страничке.
Броузер
перед показом странички на экране, разбивает ее на составляющие блоки и заносит
их в свою базу данных, предоставляя нам доступ к информации посредством
объектной модели. В частности, все картинки сохраняются в объекте images,
который, в свою очередь, входит в объект document. И, например, для того, чтобы
заменить одно изображение другим, нам достаточно воспользоваться следующей
конструкцией:
document.images["pic1"].src
= "pic/pic-1-on.gif";
Обратите
внимание, что для ссылки на конкретное изображение (ведь на страничке их может
быть много), мы используем имя картинки, которое указали в атрибуте name тега
. В данном примере, мы изменили изображение обычной кнопки, на ее
"нажатый" вариант.
Точно
таким же образом, мы можем обратиться и к другим атрибутам картинки: ширине
(width), высоте (heigth), поясняющему тексту (alt) и т.д. В нашем же случае
достаточно будет изменить только ссылку на картинку, т.к. изображения
"обычной" и "нажатой" кнопки имеют одинаковые размеры.
Все
необходимые знания для написания функции у нас уже есть, так что приступим. Вот
код на JavaScript, который осуществляет подмену изображений. В качестве
параметров мы передаем ему имя рисунка и ссылку на изображение
"нажатой" (или "отжатой") кнопки:
function change(img, ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
Бегающий указатель
Чем
отличаются варианты RollOver с "подсвечиванием пунктов меню" и
"бегающим указателем"? Только тем, что во втором случае у нас есть
всего две картинки, используемые для всех пунктов меню - пустая и с
изображением указателя.
В
этом варианте RollOver нам придется слегка изменить HTML-код, описывающий меню,
т.к. перед каждым пунктом меню мы добавляем изображение пустого указателя:
Обратите
внимание на несколько особенностей. Во-первых, вместо одной функции смены
изображения нам понадобятся две, т.к. действия, производимые при попадании
курсора в область пункта меню, и покидании ее слегка отличаются. Мы назовем эти
функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name,
тега , переместился из описания пункта меню в описание указателя -
ведь теперь мы подсвечиваем не меню, а указатель!
Число
параметров, передаваемых функциям можно сократить - достаточно ограничиться
именем картинки (атрибут 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 =
"images/referat/76674-4.gif";
}
}
Осталось
разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...
Сменяющаяся картинка
Его
отличие, от ранее рассмотренных вариантов, заключается в том, что используется
всего одна картинка, которую мы изменяем, но вариантов замены больше чем два.
Необходимо так же отметить, что скрипт может вызываться из одной части
странички, а смена картинки происходить совершенно в другой.
Как
и в предыдущем случае, начнем с корректировки HTML-кода. В данном варианте он
будет состоять из двух фрагментов: описание изображения, которое будет меняться
и описание областей, при попадании на которые вызывается скрипт. Это может
быть, к примеру, то же самое меню:
...
Соответственно,
придется скорректировать и поведение функций. В функцию over(), которая
вызывается в результате попадания курсора в активную область, достаточно
передать только ссылку на заменяющее изображение. Вызов же функции out()
осуществляется и вовсе без параметров:
function
over(ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
function out() {
if (browser_ok == 'true') {
document.images[img].src =
"images/referat/76674-5.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 для каждой невидимой в данный момент картинки и
указываем адрес изображения. Это приводит к тому, что, дойдя до этого фрагмента
кода, броузер инициирует загрузку изображений точно так же, как и для обычных
видимых картинок. К концу загрузки странички, абсолютно все картинки ее
составляющие находятся в кэше, и от этого будут загружаться мгновенно.
Приведенным
выше способом, необходимо скэшировать все невидимые на страничке картинки.
Обратите так же внимание, что я осуществляю проверку корректности броузера и, в
случае, если это достаточно старая версия, которая не поддерживает смену
изображений, то лишняя графика просто не грузится - тем самым несколько ускоряя
загрузку странички. Если Вы к нему внимательно присмотритесь, то обнаружите,
что почти вся необходимая графика грузится на первой страничке и открытие
внутренних разделов сайта происходит почти мгновенно. В частности, оказываются
уже загруженными фрагменты логотипа разных цветов и графика составляющая пункты
меню.
Надеюсь,
что приведенные выше скрипты и описание механизма их работы, покажутся Вам
полезными, и, используя их, Вы сможете реализовать свои задумки.
Список литературы
Для
подготовки данной работы были использованы материалы с сайта http://www.i2n.ru