PDA

View Full Version : Image link changing to a different image when hovered over with cursor?



Noccy
Mar 23rd, 2011, 03:33 AM
Okay so, I have an image link on my website, and for some reason, I'm completely spacing. Does anyone know how to make it so, when an image link is hovered over, it changes to a different image? Just during the hover, and nothing else.

Any help would be much appreciated!

Excavator
Mar 23rd, 2011, 03:37 AM
Hello Noccy,
That's a CSS rollover. You can google for lots of examples or look at this one (http://nopeople.com/CSS%20tips/CSS_rollover/index.html).

bullant
Mar 23rd, 2011, 03:59 AM
A javascript solution could be something like this



<html>
<head>
<script type="text/javascript">
function swapImage(obj){
obj.curPic = (obj.curPic == 0)? 1: 0;
obj.src = picPaths[obj.curPic];
}
window.onload=function(){
picPaths = ['num1.jpg','num2.jpg'];
var oImg1 = document.getElementById('img1');
oImg1.curPic = 0;
oImg1.onmouseover=oImg1.onmouseout=function(){swapImage(this);}
oImg1.src = picPaths[oImg1.curPic];
}
</script>
</head>
<body>
<div>
<a href="#">
<img id="img1" src="" alt="" />
</a>
</div>
</body>
</html>