Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
 

Изменение картинки при наведении курсора с помощью javascript

Автор: Admin  


Для того чтобы с помощью javascript создать эффект при котором происходит изменение картинки при наведении курсора необходимо использовать объект, входящий в модель DOM (DOM - объектная модель документа). Суть этой модели в том, что каждому html-контейнеру соответствует объект который имеет:

  1. свойства
  2. методы
  3. события

С помощью этих объектов можно менять значения атрибутов html-контейнеров. Это означает, что можно изменить цвет фона страницы, открыть новое окно или осуществить изменение картинки при наведении курсора в документе. При этом перезагрузки страницы не происходит. Для того чтобы осуществить изменение картинки при наведении курсора необходимо использовать объект images[]. Все объекты в DOM имеют иерархию. Т.е. имеется главный объект (Window) ему подчиняются некоторые объекты, им в свою очередь другие. Для обращения к любому объекту или его свойству указывают через точку полное или частичное его имя, начиная с имени старшего в иерархии. Полное имя объекта, отвечающего за все изображения window.document.images[]. В квадратных скобках задается имя картинки которую мы хотим заменить. Например, на странице имеется картинка <img src="picture.gif" name="MyPicture" alt="моя картинка">. Имя картинки указано в атрибуте name, следовательно, наш объект будет window.document.images['MyPicture']. Далее нужно указать полное имя новой картинки на которую мы хотим заменить текущую. Это делается с помощью свойства объекта src. Форма записи следующая window.document.images['MyPicture'].src='NewPicture.gif'. В данном случае нашему свойству присваевается новая картинка NewPicture.gif. Текущая картинка которая отображается по умолчанию - Picture.gif.

Чтобы применить наш объект с помощью которого происходит изменение картинки при наведении курсора используем два события javascript:

  1. onMouseOut - реагирует когда курсор мыши оставляет картинку;
  2. onMouseOver - реагирует когда курсор мыши пользователя входит в область картинки.

Запись следующая:

<img src="Picture.gif" name="MyPicture" alt="моя картинка" border="0" onMouseOver="" onMouseOut="">

В кавычках события onMouseOver мы должны указать свойство нашего объекта с помощью которого происходит изменение картинки при наведении курсора onMouseOver="window.document.images['MyPicture'].src='NewPicture.gif';". В кавычках события onMouseOut мы должны указать свойство нашего объекта которое возвращает прежнее изображение onMouseOut="window.document.images['MyPicture'].src='Picture.gif';".

В результате получим следующий HTML-тег со встроенным при помощи обработчика событий кодом javascript с помощью которого происходит изменение картинки при наведении курсора:

<img src="Picture.gif" name="MyPicture" alt="моя картинка" border="0" onMouseOver="window.document.images['MyPicture'].src='NewPicture.gif';" onMouseOut="window.document.images['MyPicture'].src='Picture.gif';">

Выглядеть это будет следующим образом:

моя картинка

В начало


|   предыдущая   |   каталог статей   |   следующая   |
|   1   |   2   |   3   |

    




Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
Каталог статей
Контакт
 
Компания "ПРОИнфоСистем"   2009
Rambler's Top100