Непрофессиональное введение в JAVASCRIPT



         

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


Вы можете создавать хорошие эффекты через изменение изображений при реакции на некоторые события. Вы можете например изменять изображения, когда курсор мыши передвигается поверх некоторой области. Просто проверьте следующий пример: проведите курсором над изображением (Вы получите сообщение об ошибке при использовании JavaScript 1.0 броузера - скоро мы увидим, как это предотвратить):

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

<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 изображений
  • Неопределенный порядок изображений - это необходимо для того, чтобы изменить порядок изображений не изменяя код
  • Здесь Вы можете видеть, как работает код:

    Взгляните на код (я добавил некоторые комментарии):

    <html> <head>

    <script language="JavaScript"> <!-- hide

    // ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ******************************************************




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