Информатика программирование

JavaScript: полезные функции

Mike Melnikov
Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта — RollOver, что обычно переводят как перекатывание». Мне не кажется это название удачным, но все же, давайте приступим.
Эффект может встречаться в различных вариантах, самые распространенные из которых это
подсвечивание пунктов меню
бегающий указатель
сменяющаяся картинка
Несмотря на внешне различное проявление этих эффектов, все они реализованы схожим образом и отличаются лишь в мелочах. Давайте, по порядку разберем каждый из этих вариантов.
Подсвечивание пунктов меню
Наиболее часто встречающаяся реализация эффекта RollOver. Его основой является подмена картинки при наведении курсора мышки и возврат к первоначальной после того, как мышка ее покинет.
Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах в «отжатом» и «нажатом» состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.
Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так

Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали — такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.
Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения
onMouseOver=»change(‘pic1′,’pic/pic-1-on.gif’);»
А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами
onMouseOut=»change(‘pic1′,’pic/pic-1.gif’);»
В первом случае мы указываем ссылку на изображение «нажатой кнопки», а во втором, соответственно, «отжатой» (или исходной картинки, что суть одно и тоже).
Теперь напишем всю конструкцию полностью на примере одного пункта меню
onMouseOut=»change(‘pic1′,’pic/pic-1.gif’);»> src=»pic/pic-1.gif» name=»pic1″>
Подобным образом необходимо обработать каждый пункт нашего меню. Отличие будет заключаться лишь в смене значения атрибута 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-код, описывающий меню, т.к. перед каждым пунктом меню мы добавляем изображение пустого указателя
href=»news.htm» onmouseover=»over(‘pic1’);»
onmouseout=»out(‘pic1’);»>
Обратите внимание на несколько особенностей. Во-первых, вместо одной функции смены изображения нам понадобятся две, т.к. действия, производимые при попадании курсора в область пункта меню, и покидании ее слегка отличаются. Мы назовем эти функции соответственно 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-кода. В данном варианте он будет состоять из двух фрагментов описание изображения, которое будет меняться и описание областей, при попадании на которые вызывается скрипт. Это может быть, к примеру, то же самое меню

…
onmouseout=»out();»>

onmouseout=»out();»>

onmouseout=»out();»>
Соответственно, придется скорректировать и поведение функций. В функцию over(), которая вызывается в результате попадания курсора в активную область, достаточно передать только ссылку на заменяющее изображение. Вызов же функции out() осуществляется и вовсе без параметров
function over(ref) {
if (browser_ok == ‘true’) {
document.images[img].src = ref;
}
}

BestReferat

BestReferat

JavaScript: полезные функции