Концепция
Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в Уроке 4.
Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.
Скрипт
<a href="http://web-script.narod.ru/guestbook.html"
onMouseOver="document.pic1.src='pic2.jpg'"
onMouseOut="document.pic1.src='pic1.jpg'">
<IMG SRC="pic1.jpg" BORDER=0 NAME="pic1"></a>
Эффект
Разбор скрипта
<a href="http://web-script.narod.ru/guestbook.html"
onMouseOver="document.pic1.src='pic2.jpg'"
onMouseOut="document.pic1.src='pic1.jpg'">
<IMG SRC="pic1.jpg" 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. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.
Возможный ответ здесь
