Практикум по программированию на JavaScript

Изменение изображения с помощью события onMouseOver

Показывать лекцию целиком

Концепция

В данном примере будут рассмотрены дополнительные возможности использования событий onMouseOver и onMouseOut. Как мы говорили ранее, любое событие может запускать на выполнение функцию или оператор JavaScript. Вспомните команду onLoad в теле документа HTML, которая вызывает код JavaScript из заголовка HEAD.

Представленные здесь два события происходят, когда указатель мыши перемещается на ссылку или смещается со ссылки. В Уроке 4 эти обработчики событий использовались для создания эффекта появления текста в строке состояния.

Еще раз обратите внимание на то, что теги <SCRIPT> и </SCRIPT> не требуются. Обработчики событий onMouseOver и onMouseOut встраиваются в тег HTML <A HREF>. Также отметим, что для отключения вывода рамки вокруг изображения в теге <IMG SRC> включен атрибут BORDER="0".

Сценарий

<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. При смещении указателя мыши с изображения возвращается изображение 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". Это необходимо для связи команд.

Основные моменты:

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

    Задание

    Создайте страницу 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>
    </center>
    </body>
    </html>

    Существует множество разных трюков с onMouseOver и onMouseOut. Прежде чем двинуться дальше, в следующем уроке рассмотрим еще один пример.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^