Фотографии Донецк, Киев, Москва
...
 
 

FAQ html, css, java-script, ssi

 

Изменение картинки при наведении на нее мыши

Иногда имеет смысл разнообразить страничку скромной динамикой :)

Некоторые разработчики используют флэш, но можно чудненько применить небольшой, но аккуратный скрипт.

Поместите в документе между <head> и </head> следующий код функции скрипта:

<script language="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>

Далее действия следующие:

Вариант, если картинка-ссылка:

1. «Подгружаем» ту картинку, которая будет появляться при навещении мыши:
<body onload="preload('on1.gif')">.

2. Затем, в документе, где находится картинка, которую Вы хотите заменить при наведении на нее мышью – на другую, пишите:

... какой-то Ваш код ...

<a href="ВАШ URL" 
 onMouseOver="ChangeImg('ImgName1','on1.gif')"
 onMouseOut="ChangeImg('ImgName1','off1.gif')">
 <img name="ImgName1" border="0" 
 height="100" width="100"
 src="off.gif" alt="мышуй"></a>

... какой-то Ваш код ...

3. Закрываем тело документа: </body>

Если картинок несколько (допустим, меню), то:

1. «подгружаем»:
<body onload="preload('on1.gif','on2.gif',...,'onN.gif')">

2. в документе добавляем только имена картинок и названия файлов:

... какой-то Ваш код ...

<a href="ВАШ URL" 
 onMouseOver="ChangeImg('ImgName1','on1.gif')"
 onMouseOut="ChangeImg('ImgName1','off1.gif')">
 <img name="ImgName1" border="0" 
 height="100" width="100"
 src="off1.gif" alt="мышуй"></a>

<a href="ВАШ URL" 
 onMouseOver="ChangeImg('ImgName2','on2.gif')"
 onMouseOut="ChangeImg('ImgName2','off2.gif')">
 <img name="ImgName2" border="0" 
 height="100" width="100"
 src="off2.gif" alt="мышуй"></a>

...

<a href="ВАШ URL" 
 onMouseOver="ChangeImg('ImgNameN','onN.gif')"
 onMouseOut="ChangeImg('ImgNameN','offN.gif')">
 <img name="ImgNameN" border="0" 
 height="100" width="100"
 src="offN.gif" alt="мышуй"></a>

... какой-то Ваш код ...

3. Закрываем тело документа: </body>

Аналогичные манипуляции производим, даже если «просто» картинка:

<body onload="preload('on1.gif')">

... какой-то Ваш код ...

<img name="ImgName1" border="0" 
 height="100" width="100" 
 src="off1.gif" alt="мышуй" 
 onMouseOver="ChangeImg('ImgName1','on1.gif')"
 onMouseOut="ChangeImg('ImgName1','off1.gif')">

... какой-то Ваш код ...

</body>

Пояснения:

onN.gif - картинка, которая появляется при наведении на offN.gif.

ImgNameN - имя картинки (необходимо, чтобы скрипт не перепутал что на что менять). Вы можете использовать сколько угодно картинок, только циферки и имена не забывайте добавлять.

onload в body нужен для того, чтобы картинки подгружались при загрузке страницы, а не при наведении мыши на картинку. Эффект-то нужен сразу :)


Итак, результат:

Вариант, если картинка - ссылка:

картинка - ссылка

Вариант, если несколько картинок - ссылок:

картинка - ссылка картинка - ссылка картинка - ссылка

Вариант, если просто картинка:

просто картинка

Можно посмотреть частный пример.

 

...

Немного о Донецке

Донецк. Каким ты был и каким стал
Фотографии Донецка: каким город был и каков он сейчас
 
Донецк. Скифская аллея
Скифская аллея
бульвар Пушкина, Донецк
 
Есть вопрос? Задайте!
  • ...
 
 
 
 
Стикер
...