Создание эффекта подмены изображения

Задача:При наведении курсора мыши на изображение подвала - производить его замену на изображение шапки сайта (см.рис. 17). Данный эффект необходимо реализовать из JavaScript.

Для выполнения этой задачи перейдем в нижнюю часть файлаindex.php

Рис. 10.17

Изображение в самой нижней части сайта выводится при помощи тега:

<img src="img/podval.png" width="980" height="50" border="0" />

Подключим к этому тегу два обработчика события: при наведении курсора мыши и при удалении курсора мыши:

<img src="img/podval.png" width="980" height="50" border="0"

onmouseover=""

onmouseout=""

/>

Итак, нам нужно, чтобы при наведении курсора мыши, изображениеpodval.png менялось на shapka.pngа при удалении курсора вновь возвращалось podval.png.

Чтобы обратиться к текущему тегу, в JavaScriptиспользуется слово: this–в переводе –"этот".

<img src="img/podval.png" width="980" height="50" border="0"

onmouseover="this.src='img/shapka.png'"

onmouseout="this.src='img/podval.png'"

/>

Изменяя значение атрибута src, мы подменяем изображение. Обратите внимание,что картинка shapka.pngсжимается под размеры картинкиpodval.png.Посмотрим в браузере на полученный результат. При наведении курсора мыши на нижнюю часть сайта появляется картинка шапки сайта (см. рис. 17).

В принципе, подобный эффект можно было выполнить и из CSS. Но из JavaScript можно создавать более интересные эффекты, этот язык позволяет реализовать сложные алгоритмы.

Как и с Flash, при использованииJavaScriptважно не перестараться с изобилием графических эффектов, которые могут начать раздражать пользователя.