JavaScript: полезные функции (часть V)

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

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

Наиболее часто встречающаяся реализация эффекта 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 тега . В данном примере мы изменили изображение обычной кнопки на ее «нажатый» вариант.
Точно таким же образом мы можем обратиться и к другим атрибутам картинки: ширине (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 тега переместился из описания пункта меню в описание указателя — ведь теперь мы подсвечиваем не меню, а указатель!

Число параметров, передаваемых функциям, можно сократить — достаточно ограничиться именем картинки (атрибут 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). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика, составляющая пункты меню.

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