How to change image on page when mouse over text? Ive tried with java but no joy

Hi,

I have a list of lines of text and whenever the mouse hovers over one of the lines I need it to change a separate image. Then when you move the mouse off, the image needs returns to it’s original state.

I’ve been trying to use the below javascript which works ok outside wordpress but doesn’t work once I copy it in to my wordpress page.

Any help much appreciated

<script language=”JAVASCRIPT”>
if (document.images) {
image1 = new Image
image2 = new Image

image1.src = “http://myzonesync.com/wp-content/uploads/2012/08/00.jpg&#8221;
image2.src = “http://myzonesync.com/wp-content/uploads/2012/08/01.png&#8221;

}
</script>
<font color=”#c51585″ face=”verdana” size=”2″><b>Test Link – Put Your Mouse Here</b></font>
</p><p>
<img src=”http://myzonesync.com/wp-content/uploads/2012/08/02.png&#8221; name=”imagename” border=”0″>