Итак, смена изображения сводится к изменению значения свойства src определенного элемента массива Images. Обращаться к этому свойству можно любым из описанных ранее способов. Например, используем атрибут name элемента <img>.
Скрипт может работать в связи с любым из доступных в языке событий мыши. Атрибуты onMouseOver, onMouseOut, onClick и т.д. в HTML 4.0 и выше могут применяться с большинством элементов ( см. учебник по основам HTML ). В HTML 3.2 подобные атрибуты применимы к элементу <a> и элементам форм. Так что для относительно современных браузеров при желании выполнить скрипт, например, при наведении курсора мыши на изображение, применима конструкция вида
<img src="cat.gif" name="pict_of_cat" onMouseOver="... скрипт ...">
в то время как для очень старых придется написать так:
<a href="..." onMouseOver="... скрипт ..."><img src="cat.gif" name="pict_of_cat"></a>
В этом случае HTML-элемент <a> используется не для создания гиперссылки (во вском случае, не только для ее создания), а для того, чтобы было где указать атрибут onMouseOver.
Чаще всего встречается два варианта смены изображений:
1. Изображение меняется при наведении на него курсора мыши.
Пусть в документе есть изображение:
<img src="butterfly1.jpg" name="pict" border=0 >
Для удобства опишем функцию changeImg():
<script type="text/javascript" language="JavaScript">
function changeImg(source)
{ document.pict.src = source + '.jpg';
};
</script>
и применим ее при наступлении событий onMouseOver и onMouseOut ( рассчитываем на современный браузер, поддерживающий событие onmouseover для элемента <img> ):
<img src="butterfly1.jpg" name="pict" border=0
onMouseOver="changeImg('butterfly1')"
onMouseOut="changeImg('butterfly2')" >
(обратите внимание: размеры и прочие атрибуты изображения остаются прежними)
Но сценарий еще не доработан; нет предварительной подгрузки изображений; нет определения типа браузера. Изображение не меняется в старых браузерах.
2. Изображение меняется при наведении курсора мыши на другие элементы документа.
Пусть в документе есть изображение:
<img src="flowers.jpg" name="pict1" border=0>
которое надо сменять в зависимости от того, над какой гиперссылкой находится курсор мыши. Поступаем абсолютно аналогично предыдущему варианту.
Как и раньше, опишем функцию changeImg1()
<script type="text/javascript" language="JavaScript">
function changeImg1(source)
{ document.pict1.src = source + '.jpg';
};
</script>
В элементе <a> каждой гиперссылки указываем атрибуты onMouseOver и onMouseOut (адрес гиперссылки в этом примере указываю фиктивный ):
<a href="#"
onMouseOver="changeImg1('butterfly1')"
onMouseOut="changeImg1('flowers')" >
...