Изменение картинки при наведении на нее мыши
Иногда имеет смысл разнообразить страничку скромной динамикой :)
Некоторые разработчики используют флэш, но можно чудненько применить небольшой, но аккуратный скрипт.
Поместите в документе между <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 нужен для того,
чтобы картинки подгружались при загрузке страницы, а не при
наведении мыши на картинку. Эффект-то нужен сразу :)
Итак, результат:
Вариант, если картинка - ссылка:
Вариант, если несколько картинок - ссылок:
Вариант, если просто картинка:
Можно посмотреть частный пример.
|
