Tried searching and I can't find anything that works.

I want to have a designated area that changes images on roll over and then when you roll off restores back to the original image.

Here's what I have so far.


Javascript:

function swap(image) {
document.getElementById("main").src = image.href;
}


HTML:

<a onclick="swap(this); return false;" href="image.png">
<img src="image_s.png"></img>
</a>

<div style="width:300px; height:300px;"><img id="main" src="image_s.png"></div>