JavaScript: полезные функции
Категория реферата: Рефераты по информатике, программированию
Теги реферата: реферат по информатике, конспект
Добавил(а) на сайт: Элинский.
1 2 3 4 | Следующая страница реферата
JavaScript: полезные функции
Mike Melnikov
Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание". Мне не кажется это название удачным, но все же, давайте приступим.
Эффект может встречаться в различных вариантах, самые распространенные из которых это:
подсвечивание пунктов меню
бегающий указатель
сменяющаяся картинка
Несмотря на внешне различное проявление этих эффектов, все они реализованы схожим образом и отличаются лишь в мелочах. Давайте, по порядку разберем каждый из этих вариантов.
Подсвечивание пунктов меню
Наиболее часто встречающаяся реализация эффекта RollOver. Его основой является подмена картинки при наведении курсора мышки и возврат к первоначальной после того, как мышка ее покинет.
Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в "отжатом" и "нажатом" состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.
Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:
Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали - такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.
Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения:
onMouseOver="change('pic1','pic/pic-1-on.gif');"
А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами:
onMouseOut="change('pic1','/images/21/image_34662.gif');"
В первом случае мы указываем ссылку на изображение "нажатой кнопки", а во втором, соответственно, "отжатой" (или исходной картинки, что суть одно и тоже).
Теперь напишем всю конструкцию полностью на примере одного пункта меню:
Подобным образом необходимо обработать каждый пункт нашего меню. Отличие будет заключаться лишь в смене значения атрибута name, который для каждого пункта должен быть уникальным и соответствующей коррекции значений параметров в вызовах функций onMouseOver и onMouseOut.
Перед тем, как перейти к написанию кода, поговорим о том, каким образом мы можем управлять изображениями на страничке.
Броузер перед показом странички на экране, разбивает ее на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией:
document.images["pic1"].src = "pic/pic-1-on.gif";
Рекомендуем скачать другие рефераты по теме: шпаргалки по социологии, культурология как наука.
1 2 3 4 | Следующая страница реферата