Issue in js onmouseover to change pictures.

I use this code to make a onmouseover change pictures. but in IE it works, in firefox it shows wrong, where is the problem? And can anyone add a onmouseout function that return to the first picture for me? Thanks.

<script type="text/javascript">
function changeimage(rel){开发者_如何学运维
document.getElementById("image").src=rel;
}
</script>
<img src="img1.jpg" id="image" />
<a onmouseover="changeimage('img1.jpg')" rel="img1.jpg">img1</a>
<a onmouseover="changeimage('img2.jpg')" rel="img2.jpg">img2</a>
<a onmouseover="changeimage('img3.jpg')" rel="img3.jpg">img3</a>

you can use:

<script type="text/javascript">
function changeimage(rel)
{
    var img = document.getElementById("image");
    img.setAttribute("orig", img.src);
    img.src=rel;
}

function SetOriginal()
{
    var img = document.getElementById("image");
    img.src = img.getAttribute("orig");
}
</script>
<img src="img1" id="image" />
<a onmouseover="changeimage('img1')" onmouseout="SetOriginal()" rel="img1">img1</a>
<a onmouseover="changeimage('img2')" onmouseout="SetOriginal()" rel="img2">img2</a>
<a onmouseover="changeimage('img3')" onmouseout="SetOriginal()" rel="img3">img3</a>

to return to the original image. I tested this on firefox(3.6.12) and it is working