JavaScript. Основы клиентского программирования. Захаркина В.В. - 25 стр.

UptoLike

ВУЗ: 

СПбГУ | Санкт-Петербург

Составители: 

Рубрика: 

48
элементов. Так что для современных браузеров при желании
выполнить скрипт, например, при наведении курсора мыши на
изображение, применима конструкция вида
<img src="cat.gif" name="pict "
onMouseOver="…инструкции…">
Чаще всего встречается два варианта смены изображений.
1. Изображение меняется при наведении на
него курсора мыши.
Пусть в документе есть изображение и при наведении курсора мыши
хочется его сменять изображением butterfly1.jpg.
Для удобства опишем функцию changeImg():
function changeImg(source)
{
document.pict.src = source + '.jpg';
};
и применим ее при наступлении событий onMouseOver и
onMouseOut:
<img src="butterfly.jpg" name="pict" border=0
onMouseOver="changeImg('butterfly')"
onMouseOut="changeImg('butterfly1')" >
2. Изображение меняется при наведении
курсора мыши на другие элементы документа.
Пусть в документе есть изображение:
<img src="flowers.jpg" name="pict1" border=0>
49
которое надо сменять в зависимости от того, над какой гиперссылкой
находится курсор мыши. Поступаем абсолютно аналогично
предыдущему варианту.
Как и раньше, опишем функцию changeImg1()
function changeImg1(source)
{
document.pict1.src = source + '.jpg';
};
В элементе a каждой гиперссылки наряду с адресом целевого
документа указываем атрибуты onMouseOver и onMouseOut.
Получится описание примерно следующего вида:
<a href="адрес_целевого_документа"
onMouseOver="changeImg1('butterfly1')"
onMouseOut="changeImg1('flowers')" >
Предварительная подгрузка изображений
Для того, чтобы эффект смены изображений проявился сразу после
загрузки страницы, надо подгрузить изображения, которые будут
сменять исходные в ответ на события мыши, написав в начале
документа соответствующий инструкции. Для предыдущего примера с
бабочками можно сделать это так:
but1 = new Image();
but1.src = 'butterfly1.jpg';
but2 = new Image();
but2.src = 'butterfly2.jpg';
but3 = new Image();
but3.src = 'butterfly31.jpg';
В этом случае изображения будут подгружены заранее и в нужный
момент будут взяты из кэша.

Страницы