Список вопросов по 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.




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