|
Web - кодинг: JavaScript:
JavaScript полезные функции (часть V)
Автор: Мельников Михаил
Источник:
Эффект, который мы сейчас рассмотрим, является,
пожалуй, самым распространенным. И заключается он в смене изображения при
наведении на него мышкой. Часто можно слышать английское название эффекта
- RollOver, что обычно переводят как "перекатывание". Мне не кажется это
название удачным, но все же, давайте приступим.
Эффект может
встречаться в различных вариантах, самые распространенные из которых
это:
Несмотря на внешне различное проявление этих
эффектов, все они реализованы схожим образом и отличаются лишь в мелочах.
Давайте по порядку разберем каждый из этих вариантов.
Подсвечивание пунктов меню
Наиболее часто
встречающаяся реализация эффекта 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.warayg.narod.ru
и все имена, ссылки авторов обязательны.
© 2005
|