Клуб друзей



Один из способов смены картинок по наведении мыши на ссылки

Эта картинка заменяется по наведению указателем мыши на любую из графических ссылок. Сами ссылки в виде Gif-рисунков также заменяются. Этот скрипт работает как в IE от версии 4.0 и выше, так и в Netscape.


Рассмотрим, как это все работает:
В заголовочной части инициализируем все активные картинки:

<script language=JavaScript>
{
im0 = new Image; im0.src = "0.gif";

im1 = new Image; im1.src = "1.gif";
im2 = new Image; im2.src = "2.gif";
im3 = new Image; im3.src = "3.gif";

mp1 = new Image; mp1.src = "1_0.gif";
mp2 = new Image; mp2.src = "2_0.gif";
mp3 = new Image; mp3.src = "3_0.gif";

ma1 = new Image; ma1.src = "1_1.gif";
ma2 = new Image; ma2.src = "2_1.gif";
ma3 = new Image; ma3.src = "3_1.gif";
}

Здесь под имя "im0" заносится начальный рисунок, который будет заменяться при наведении на ссылку. Первая тройка - рисунки которыми будет заменяться рисунок "im0". Далее, вторая тройка - рисунки пассивных кнопок, и третья тройка - активные кнопки.

Теперь, чтобы всем этим управлять, нужна функция:

function frepimg(strName, objImage)
{
document.images[strName].src = objImage.src;
}
</script>


Функция проста, она просто подставляет нужную картинку, - параметр "objImage" в рисунок с именем - параметр "strName". Идентификаторы параметров можно назвать как угодно и совсем не обязательно strName и objImage.

Теперь, как изобразить обработчик, чтобы функция работала и на отдельную картинку, и на сами кнопки?
Все просто: где-то на странице, в любой ее части после тега BODY заносим рисунок:

<IMG SRC="0.gif" WIDTH=60 HEIGHT=60 BORDER=0 ALT="" name="vimage">

Даем ему произвольное имя, например "vimage"
Делаем графические ссылки, каждой картинке здесь также даем по имени, в данном случае - menu1,menu2,menu3.

<a href="#" onMouseOver="frepimg('menu1', ma1); frepimg ('vimage', im1)" onMouseOut="frepimg('menu1', mp1); frepimg ('vimage', im0)"><IMG SRC="1_0.gif" WIDTH=60 HEIGHT=20 BORDER=0 name="menu1"></a><BR>

<a href="#" onMouseOver="frepimg('menu2', ma2); frepimg ('vimage', im2)" onMouseOut="frepimg('menu2', mp2); frepimg ('vimage', im0)"><IMG SRC="2_0.gif" WIDTH=60 HEIGHT=20 BORDER=0 name="menu2"></a><BR>

<a href="#" onMouseOver="frepimg('menu3', ma3); frepimg ('vimage', im3)" onMouseOut="frepimg('menu3', mp3); frepimg ('vimage', im0)"><IMG SRC="3_0.gif" WIDTH=60 HEIGHT=20 BORDER=0 name="menu3"></a><BR>


Здесь мы обрабатываем события: onMouseOver и onMouseOut. Причем, на каждое событие вызываем на выполнение функцию по 2 раза с соответствующими параметрами. Функция подставляет нужные (objimage) рисунки под то имя, какое указывается в первом параметре.


[<<Назад]

WDstudio © 2000г.