Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
|
|
||||||||||
Для того чтобы с помощью javascript создать эффект при котором происходит изменение картинки при наведении курсора необходимо использовать объект, входящий в модель DOM (DOM - объектная модель документа). Суть этой модели в том, что каждому html-контейнеру соответствует объект который имеет:
С помощью этих объектов можно менять значения атрибутов 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:
Запись следующая: <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 |
|