Урок № 16

Концепция

Вот вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.

Скрипт

<HTML>
<HEAD>
<title>Пример смены картинок</title>
<Script Language="JavaScript">
  function windows()
  {
    document.mypic.src="win1.png"
    }
    function doors()
    {
    document.mypic.src="win2.png"
  }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h3>Пример анимации</h3>
<A HREF="http://web-script.narod.ru"
onMouseOver="doors()" onMouseOut="windows()">
<IMG SRC="win1.png" NAME="mypic" BORDER=0></A>
</BODY>
</HTML>

Эффект

Простенькая анимация

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

Не забывайте про регистр и <script language= "javascript">

<Script Language="JavaScript">
  function windows()
  {
    document.mypic.src="win1.png"
  }
  function doors()
  {
    document.mypic.src="win2.png"
  }
</Script>

Функции выполняют то же, что и команды на прошлом уроке. Помните иерархию объектов? Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы windows() и doors().

<A HREF="http://web-script.narod.ru"
onMouseOver="doors()" onMouseOut="windows()">
<IMG SRC="win1.png" NAME="mypic" BORDER=0></A>

Схема практически та же, что и на прошлом уроке. Oбычно функция используется для многократных повторений, мы просто хотели сделать наш пример короче. Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:

<Script Language="JavaScript">
  function windows()
  {
    document.mypic.src="win1.png"
  }
  function doors()
  {
    document.mypic.src="win2.png"
  }
  function windows2()
  {
    document.mypic2.src="win1.png"
  }
  function doors2()
  {
    document.mypic2.src="win2.png"
  }
</Script>

...и две разные картинки:

<A HREF="http://web-script.narod.ru"
onMouseOver="doors()" onMouseOut="windows()">
<IMG SRC="win1.png" NAME="mypic" BORDER=0></A>
<A HREF="http://web-script.narod.ru"
onMouseOver="doors2()" onMouseOut="windows2()">
<IMG SRC="win2.png" NAME="mypic" BORDER=0></A>

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.

Ваше задание

Переделайте прошлое задание, создав две функции для смены картинки.

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

Вперед, на Урок 17