Список вопросов по HTML


4.8. Как сделать, чтобы при наведении мышки на картинку-ссылку картинка изменилась?


<head> <script language="JavaScript" type="text/javascript"><!-- function ChangeImg() { if(document.images) {    eval("document."+ChangeImg.arguments[0]+    ".src=('"+ChangeImg.arguments[1]+"')");   } }

function preload() {   if (document.images) {     var imgsrc = preload.arguments;     arr=new Array(imgsrc.length);     for (var j=0; j<imgsrc.length; j++) {       arr[j] = new Image;       arr[j].src = imgsrc[j];     }   } } //--></script> </head>

<body onload="preload('over1.gif', 'over2.gif', 'overN.gif')">

где overN.gif - картинка, которая должна показываться при наведении мышки. onload нужен для того, чтобы картинки подгружались сразу, а не в то время, когда навели мышку, так как на слабом канале эффекта сразу можно не заметить.

<a href="1.htm"     onmouseover="ChangeImg('image1','over1.gif')"     onmouseout="ChangeImg('image1','out1.gif')"><img src="out1.gif" name="image1" alt="image1" /></a>

<a href="2.htm"     onmouseover="ChangeImg('image2','over2.gif')"     onmouseout="ChangeImg('image2','out2.gif')"><img src="out2.gif" name="image2" alt="image2" /></a>

...

<a href="N.htm"     onmouseover="ChangeImg('imageN','overN.gif')"     onmouseout="ChangeImg('imageN','outN.gif')"><img src="outN.gif" name="imageN" alt="imageN" /></a>

в <img> "name" нужно для того, чтобы JS знал, какой картинке соответствует каждая ссылка.

Если вы хотите, чтобы картинка менялась, но не была при этом ссылкой, смотрите пункт 5.1.




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



Книжный магазин