Урок 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>
    <h2>Пример анимации</h2>

<A HREF="http://www.jsp.newmail.ru"
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().

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

<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>

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

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

Ваше задание

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

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

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

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

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.

Урок 16 Смена картинок через функцию

Концепция

Скрипт

Эффект

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

Ваше задание

Урок 16
Смена картинок через функцию