Джо Бернс/Смена картинки через onMouseOver

Джо Бернс
Урок 15. Смена картинки через onMouseOver.
Концепция

Вспомним обработчики onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в Уроке 4.

Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

Скрипт
<a href="les1.htm" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'"><img scr="b.gif" BORDER=0 NAME="pic1"></a>

Эффект

Разбор скрипта

Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.

Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и где они располагаются, если вы дали имя нужной картинке.

onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
document.pic1.src следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
В этом примере onMouseOver меняет источник изображения на 'а.gif'.
ОnMouseOut заставляет объект изображение показывать а.gif.
Помните, что для наилучшего эффекта картинки должны быть одинакового размера.

Ваше задание

Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Назад | Содержание | Вперед