On mouseover image change.

can someone tell me the code where when you put your mouseover an image it changes into another image? +rep if it works :D

Well im not a genius when it comes to JS but I've tested this and it works I guess..

HTML Code:

---

<script type="text/javascript">
function over(id, up, over)
{
    document.getElementById(id).src = over;
}
   
function out(id, over, up)
{
    document.getElementById(id).src = up;
}
</script>
<img src="image_1.png" id="one" onmouseOver="over(this.id, this.src, 'image_1_over.png');" onmouseout="out(this.id, this.src, 'image_1.png)" />

---

replace the images in the ' ' with the images you want to use

Are you using DIVs styled with CSS?

Yeah, use div's & css, much easyer, cleaner ;) (in my opinion)

basicly you'ld have a css like;
(just change the width & height to whatever size your image is)

HTML Code:

---

#divname{
background-image: url(path/to/image.png);
background-repeat: no-repeat;
width: 100px;
height: 100px;
}

#divname:hover{
background-image: url(path/to/image_hover.png);
background-repeat: no-repeat;
width: 100px;
height: 100px;
}

---