2015-10-22
238
На странице выводится изображение off.gif. Если навести на изображение указатель мыши, то изображение изменится на on.gif. При смещении указателя мыши с изображения возвращается изображение off.gif.
Разбор сценария
<A HREF="http://www.intuit.ru" onMouseOver="document.pic1.src='on.gif'"onMouseOut="document.pic1.src='off.gif'"><IMG SRC="off.gif" BORDER=0 NAME="pic1"></a>Так как обработчики события были достаточно хорошо рассмотрены ранее, то этот сценарий не представляет трудностей. Когда курсор уходит с изображения, появляется off.gif. Когда указывает на изображение, появляется on.gif.
Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Это необходимо для связи команд.
Основные моменты:
1. onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
2. Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, то название файла *.gif берется в одинарные кавычки, а не в двойные.
3. document.pic1.src следует иерархии объектов, о которой говорилось в Уроке 8. document относится к текущему объекту документа HTML, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл изображения.
|
|
|
4. В этом примере onMouseOver меняет источник изображения на on.gif.
5. ОnMouseOut заставляет объект изображение вывести off.gif.
6. Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.
Задание
Создайте страницу HTML. Разместите все по центру страницы. Используйте тег H1 со своим именем. Под ним поместите изображение Bubble1.gif. Когда курсор мыши укажет на это изображение, оно должно измениться на изображение Bubble2.gif. Когда курсор мыши сместится с этой ссылки, снова должно появиться изображение Bubble1.gif.
Возможное решение
Например, следующий код:
<html> <head> </head> <body bgcolor="white"> <center> <h1>Иван Иванович</h1> <p> <a href="" onMouseOver="document.pic1.src='bubble2.gif' " onMouseOut="document.pic1.src='bubble1.gif'"> <img src="bubble1.gif" border=0 name="pic1"></a></p> </body> </html>Существует множество разных трюков с onMouseOver и onMouseOut. Прежде чем двинуться дальше, в следующем уроке рассмотрим еще один пример.
16. Урок: Изменение изображения с помощью функции
Динамическое изменение изображений с помощью функций.
Концепция
Вот еще один пример использования onMouseOver и onMouseOut. На этот раз вместо включения оператора JavaScript для смены картинки в тег <A HREF> обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда нужна только одна команда JavaScript, можно включить ее в тег HTML <A HREF>. Для нескольких операторов JavaScript больше подходит функция. В реальном мире на странице часто требуется многократное изменение изображения с помощью JavaScript.
Сценарий
<HTML><HEAD> <title> Пример JavaScript </title><SCRIPT type="text/javascript">function up() { document.mypic.src="up.gif" }function down(){ document.mypic.src="down.gif" }</SCRIPT></HEAD> <BODY> <CENTER> <h2>Пример анимации</h2> <A HREF="http://www.intuit.ru" onMouseOver="up()" onMouseOut="down()"><IMG SRC="down.gif" NAME="mypic" BORDER=0></A> </BODY></HTML>
