Hi,
I essentially have this code below and what I am trying to do is change the image when the mouse rolls over it but change it back when the mouse leaves. What am I doing wrong?

HTML Code:
<html>
<script type="text/javascript">
function ShowFlip(number)
{
document.getElementById( number ).innerHTML = '<img src="../events/1flip.jpg">';
}

function HideFlip(number)
{
document.getElementById( number ).innerHTML = '<img src="../events/1.jpg">';
}
</script>

<body>
<a id="1" style="cursor:default;" 
onMouseOver="ShowFlip('1');"
onMouseOut="HideFlip('1');">
<img src="../events/1.jpg">
</a>
</body>
</html>
I have also tried assigning the id to the image and came up with this code but it still doesn't change anything. Just shows the original image. Any help is appreciated! Thanks!

HTML Code:
<html>

<script type="text/javascript">
function ShowFlip(number)
{
document.getElementById('a').src = "../events/1flip.jpg";
}

function HideFlip(number)
{
document.getElementById('a').src = "../events/1.jpg";
}
</script>

<body>
<div>
	<img id="a" src="../events/1.jpg" onMouseOver="ShowFlip('a');"
	onMouseOut="HideFlip('a');">
</div>
</body>
</html>