Разработка сайтов, создание сайтов
главная / JavaScript / изменение картинки при наведении курсора

изменение картинки при наведении курсора

Иногда владельцам веб-сайтов необходимо сделать, чтобы при наведении курсора мыши на картинку она менялась на другую. Такой эффект достигается с помощью JavaScript (можно и через CSS, но об этом позже).

В файле между <head> и </head> пишем следующий JavaScript код:
<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>

В тэгах <body> и </body>:
<a href="#"
onMouseOver="ChangeImg('ImgName1','путь_ко_второй_картинке')"
onMouseOut="ChangeImg('ImgName1','путь_к первой_картинке')">
<img name="ImgName1" src="путь_к первой_картинке"></a>

Если нужна возможность предзагрузки картинок для удобства посетителя, то в тэге <body> пишем:
<body onload="preload('путь_ко_второй_картинке'>
Вот таким образом вы достигнете эффекта сменяющейся картинки при наведении курсора.



Источник: lospirata.ru
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
JavaScript: появление картинки в другом месте при нажатии на картинку
Регулярные выражения со строками на MooTools
Закругление углов и прозрачность с помощью CSS

НОВОСТИ
2011 г., «VisMech.ru»