JavaScript для мага



Изменение изображений в соответствии с событиями, инициируемыми самим читателем


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

(online-версия руководства позволит Вам проверить этот скрипт немедленно)

Исходный код этого примера выглядит следующим образом:

<a href="#"

  onMouseOver="document.myImage2.src='img2.gif'"

  onMouseOut="document.myImage2.src='img1.gif'">

<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

При этом могут возникнуть следующие проблемы:

- Читатель пользуется браузером, не имеющим поддержки JavaScript 1.1.

- Второе изображение не было загружено.

- Для этого мы должны писать новые команды для каждого изображения на web-странице.

- Мы хотели бы иметь такой скрипт, который можно было бы использовать во многих web-страницах вновь и вновь, и без больших переделок.

Теперь мы рассмотрим полный вариант скрипта, который мог бы решить эти проблемы. Хотя скрипт и стал намного длиннее - но написав его один раз, Вы не больше будете беспокоиться об этих проблемах. Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:

- Не оговоривается количество изображений - не должно иметь значения, сколько их используется, 10 или 100

- Не оговоривается порядок следования изображений - должна существовать возможность изменять этот порядок без изменения самого кода

(online-версия руководства позволит Вам проверить этот скрипт немедленно)

                    

Рассмотрим скрипт (я внес туда некоторые комментарии):

<html>

<head>

<script language="JavaScript">

<!-- hide

// ******************************************************

// Script from Stefan Koch - Voodoo's Intro to JavaScript

//     http://rummelplatz.uni-mannheim.de/~skoch/js/




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