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/




Начало  Назад  Вперед