Базы данных • Интернет • Компьютеры • Операционные системы • Программирование • Сети • Связь • Разное

Активныые рисунки

Программы •Железо • Драйверы • Хостинг •Энциклопедия рекламы

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

Итак, немного теории: когда курсор мыши грозно нависает над картинкой, она издает крик о помощи - генерирует событие onMouseOver - "мышь надо мной", а когда мышь наконец уходит, издает сигнал спасения - событие onMouseOut. На самом деле ситуация сложнее - просто картинка лишена возможности издавать крики о помощи и только картинка, являющаяся одновременно ссылкой (т.е заключенная в тэги </a> </a>), может это делать.

В первую очередь необходимо организовать вызов команды спасения - создать инструкции, о том, что делать в случае получения сигнала о помощи:

<a href="index.html" onMouseOver="img_act('img1')"; onMouseOut="img_inact('img1')";>
<img src=980/"1off.gif" name="img1" width=20 height=20 border=0></a>;

Что это значит? Мы создали ссылку, которая при событии onMouseOver быдет вызывать функцию JavaScript img_act, а при событии onMouseOut - img_inact. Внутри ссылки располагается наша картинка, обратите внимание на параметр name в тэге img - name="img1" - он дает картинке уникальное имя, которое передается "спасательным" функциям img_act и img_inact, чтобы они знали, над какой именно картинкой нависла грозная опасность.

На самом деле вся работа еще впереди - надо сделать функции-спасатели. Прежде всего надо зарезервировать 2 картинки, которые будут соответствовать включенному и выключенному состояниям. Обратите внимание, что называются они img1on и img1off т.е. как наша картинка img1, с прибавкой on и off (это не имеет никакого отношения к именам файлов):

img1on = new Image ; img1off = new Image ;

Теперь надо указать, какие именно это картинки, т.е. прописать реальные имена файлов для включенного и выключенного состояний:

img1on.src = 980/"1on.gif"; img1off.src = 980/"1off.gif";

А теперь можно написать и сами функции-спасатели:

function img_act (imgName) {
imgOn = eval (imgName + "on.src");
document [imgName].src = 980/imgOn; }

function img_inact (imgName) {
imgOff = eval (imgName + "off.src");
document [imgName].src = 980/imgOff; }

Эти функции получают имя картинки и сохраняют его в переменной imgName. Мы вызывали функции img_act(img1), значит в нашем случае imgName=img1. Дальше к этому имени привешивается "on" или "off" - помните как мы обозначили имена для включенного и выключенного состояний - img1on и img1off. Наконец производится замена картинки c именем imgName (т.е. img1) на включенную (функция img_act) - img1on или выключенную (функция img_inact) - img1off.

Вот вроде и все - но есть еще маленькая заминка - Internet Explorer 3 кое-что не понимает и разразится кучей ошибок при обнаружении такого кода - необходимо определить броузер и исключить выполнение кода, если это IE3. Тут возможно несколько вариантов - как всегда решение в лоб не самое короткое и красивое (код взят у Евгения Савельева на www.js.ru):

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }

Тут анализируется броузер и если это IE3, то переменная roll получает значение false и тогда дальше надо выполнять проверку roll и запрещать выполнение, если roll не равно true. Более элегантное и короткое решение:

if (document.images)

это выражение равно false в случае IE3 - единственная строка выполняет те же функции, что и весь предыдущий код проверки броузера.

Итак привожу весь код (для примера пусть у нас будет 2 картинки): Эта часть вставляется в head вашего документа. Не забудьте, что содержимое между тэгами script должно быть вложено в комментарии для совместимости со старыми броузерами и некоторыми поисковыми системами:

Эта часть вставляется в так сказать тело (body):

Если вы во всем разобрались, вам должно быть понятно, что можно создать другие функции, вызываемые событиями onMouseOver и onMouseOut, которые будут выполнять любые действия - например изменять вид другой картинки в другом месте или даже нескольких картинок и т.д. Применение ограничено только вашей фантазией, экспериментируйте.

Назад в раздел