On mouseover image change.

[Mario]

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

[Jme]

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



<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

[loserWILL]

Are you using DIVs styled with CSS?

[[Oli]]

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)


#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;
}