JavaScript для мага


Изменение изображений в соответствии с событиями, инициируемыми самим читателем - часть 3


// нужно корректировать, если Вы хотите использовать скрипт

// применительно к другим изображени\ям (конечно это не освобождает

// Вас от об\язанности подредактировать в документе также и раздел body)

 

preload("link1", "img1f.gif", "img1t.gif");

preload("link2", "img2f.gif", "img2t.gif");

preload("link3", "img3f.gif", "img3t.gif");

 

// -->

</script>

</head>

 

 

<body>

<a href="link1.htm" onMouseOver="on('link1')"

  onMouseOut="off()">

<img name="link1" src="img1f.gif"

  width="140" height="50" border="0"></a>

 

<a href="link2.htm" onMouseOver="on('link2')"

  onMouseOut="off()">

<img name="link2" src="img2f.gif"

  width="140" height="50" border="0"></a>

 

<a href="link3.htm" onMouseOver="on('link3')"

  onMouseOut="off()">

<img name="link3" src="img3f.gif"

  width="140" height="50" border="0"></a>

</body>

</html>

 

Данный скрипт помещает все изображения в массив pics. Создает этот массив функция preload(), которая вызвается в самом начале. Вызов функции preload() выглядит просто как:

 

preload("link1", "img1f.gif", "img1t.gif");

 

Это означает, что скрипт должен загрузить с сервера два изображения: img1f.gif и img1t.gif. Первое из них - это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве  первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел<body>, то обнаружите изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.




Начало  Назад  Вперед