Хоувър ефект на изображение

[Gamerz]

Можете ли да ми кажете най-добрия начин за създаване на Hover ефект на изображение. Трябва ми съвсем лек и елементарен код. Когато си сложа мишката на изображението, то да се промени, но пак да си остане със същия линк. Просто не мога да реша какво да използвам...


Благодаря!

 

[IzKuFeLiQqQqQ]

ем можеш чист css да ползваш...
<a href="#"id="img"></a>
[css]#img
{
background:url('/img.png')no-repeat;
width:XXpx;
height:XXpx;
}

#img:hover
{
background:url('/img123.png')no-repeat;
}[/css]
можеш и jquery
<a href="#"><img src="/img.png" id="img"/></a>
[js]$(function() {
$('#img').hover(function() {
$(this).attr('src','/img123.png');
},
function() {
$(this).attr('src','/img.png');
});
});[/js]

препоръчвам ти jquery вариянта тъй като е по... гъвкав
ако има затруднения казвай

 

[Gamerz]

Работата е там, че трябва да направя 10 изображения да са с хоувър ефект и всичките са на една страница... как трябва да стане ?

 

[palex]

Ей това е най-лекото възможно:
<a href="url"><img src="pic1.jpg" onmouseover="this.src='pic2.jpg'" onmouseout="this.src='pic1.jpg'"/></a>

 

[Gamerz]

Знам го това, но като си махна мишката изображението си остава пак хоувър-нато... не се връща...

 

[palex]

Дай тестов линк да видя как си го направил

 

[Gamerz]

http://gamers.bg/system-tech

 

[palex]

Не си внимавал като си писал кода:

<img onmouseout="this.src='images/tech/xbox360_tech1.png'" onmouseover="this.src='images/tech/xbox360_tech2.png'" src="images/tech/xbox360_tech1.png">

 

[Gamerz]

Стана, но поради някаква причина при второто изображение не става и ми изчезва когато си сложа мишката на него...

 

[IzKuFeLiQqQqQ]

то става ама 2-рото изображение http://gamers.bg/images/tech/PSVITA_tech2.png го няма

 

[madmax3_]

http://web.geobg.info/?demo=simple_effects