Урок 15
Смена картинки через onMouseOver

Концепция

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

Еще раз обратите внимание, что не требуются тэги <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>

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

<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 следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
• В этом примере onMouseOver меняет источник изображения на а.gif.
• ОnMouseOut заставляет объект изображение показывать а.gif.
• Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.

Ваше задание

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

Возможный ответ здесь