Джо Бернс/Смена картинок через функцию

Джо Бернс
Урок 16. Смена картинок через функцию.
Концепция

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

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

Скрипт
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } </SCRIPT> </HEAD> <BODY> <CENTER> <h3>Пример анимации</h3> <A HREF="Урок1.htm" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0> </BODY> </HTML>

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

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

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

function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" }

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

<A HREF="http://www.newmail.ru" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A>

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

<SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } function up2() { document.mypic2.src="up.gif" } function down2() { document.mypic2.src="down.gif" } </SCRIPT>

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

<A HREF="http://www.htmlgoodies.com" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A> <a href="http://www.htmlgoodies.com" onMouseOver="up2()" onMouseOut="down2()"> <IMG SRC="down.gif" NAME="mypic2" BORDER=0></A>

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

Ваше задание

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

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