2.10 Смена картинки через onMouseOver
Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее - с помощью этих команд появлялся текст в строке состояния. Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>. Скрипт:
<a href="http://nonags.online.ru/main.html"
onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">
<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>
Вы уже знаете о событиях достаточно, чтобы разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.
Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.
-
onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
-
Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
-
document.pic1.src следует иерархии объектов. Document относится к объекту документ, a pic1 - это имя объекта изображение (имя можно придумать какое угодно). src (источник) - это свойство объекта изображение, которое указывает файл с картинкой.
-
В этом примере onMouseOver меняет источник изображения на а.gif.
-
ОnMouseOut заставляет объект изображение показывать b.gif.
-
Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.
Рассмотренные выше команды приведены в примере 2.12, а результат выполнения на рис. 2.12.
|
Пример 2.12. Смена картинки |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Смена картинки</TITLE> </HEAD> <BODY> <P align="center">Портрет дальнего родственника <p align="center"><a href=http://newmail.ru/les15.htm onMouseOver="document.img1.src='images/pic1.gif'" onMouseOut="document.img1.src='images/pic2.gif'"> <img src="images/pic2.gif" border=0 name="img1" width=77 height=76></a> </BODY> </HTML>
|
2.11 Смена картинок через функции
Вот еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию. Когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.
Функции выполняют то же, что и команды в прошлом примере. Помните иерархию объектов: сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().
function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" }
Схема практически та же, что и в прошлом примере:
<A HREF=http://www.newmail.ru onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A>
Обычно функция используется для многократных повторений. Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например, вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:
<SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } function up2() { document.mypic2.src="up.gif" } function down2() { document.mypic2.src="down.gif" } </SCRIPT>
...и две разные картинки:
<A HREF=http://www.newmail.ru onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A> <a href=http://www.newmail.ru onMouseOver="up2()" onMouseOut="down2()"> <IMG SRC="down.gif" NAME="mypic2" BORDER=0></A>
Видите, как новые функции связаны с новыми именами, делайте это каждый раз при добавлении новой картинки.
Рассмотренные выше команды приведены в примере 2.13. Если быстро водить мышью туда-сюда, кенгуру как будто подпрыгивает (рис.2.13).
|
Пример 2.13. Смена картинок через функцию |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Смена картинки</TITLE> <SCRIPT type="text/javascript"> function up() { document.mypic.src="images/roo1.gif" } function down() { document.mypic.src="images/roo.gif" } </SCRIPT> </HEAD> <BODY> <CENTER> <h2>Пример анимации</h2> <A HREF="http://www.newmail.ru" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="images/roo.gif" NAME="mypic" BORDER=0> </BODY> </HTML>
|
