What's up with this rollover script? (Javascript)

[Tomi-gwc]

Can anyone tell me whats wrong with this?

<script language="Javascript">
var button1 = new Image;
var button2 = new Image;
var button3 = new Image;
var button4 = new Image;
var button5 = new Image;
var button6 = new Image;
var button7 = new Image;
var button8 = new Image;
var button9 = new Image;
var button10 = new Image;
var button11 = new Image;
var button12 = new Image;
var button13 = new Image;
var button14 = new Image;
var button15 = new Image;
var button16 = new Image;

button1.src = 'images/home.jpg'
button2.src = 'images/home2.jpg'
button3.src = 'images/restaurant.jpg'
button4.src = 'images/restaurant2.jpg'
button5.src = 'images/cafe.jpg'
button6.src = 'images/cafe2.jpg'
button7.src = 'images/menu.jpg'
button8.src = 'images/menu2.jpg'
button9.src = 'images/gallery.jpg'
button10.src = 'images/gallery2.jpg'
button11.src = 'images/catering.jpg'
button12.src = 'images/catering2.jpg'
button13.src = 'images/functions.jpg'
button14.src = 'images/functions2.jpg'
button15.src = 'images/contact.jpg'
button16.src = 'images/contact2.jpg'

</script>

<a href="index.php" onmouseover="document.rollover.src=button1.src" onmouseout="document.rollover.src=button2.src"><img src="images/home.jpg" border=0 name="rollover"></a>
<a href="restaurant.php" onmouseover="document.rollover.src=button3.src" onmouseout="document.rollover.src=button4.src"><img src="images/restaurant.jpg" border=0 name="rollover"></a>
<a href="cafe.php" onmouseover="document.rollover.src=button5.src" onmouseout="document.rollover.src=button6.src"><img src="images/cafe.jpg" border=0 name="rollover"></a>
<a href="menu.php" onmouseover="document.rollover.src=button7.src" onmouseout="document.rollover.src=button8.src"><img src="images/menu.jpg" border=0 name="rollover"></a>
<a href="gallery.php" onmouseover="document.rollover.src=button9.src" onmouseout="document.rollover.src=button10.src"><img src="images/gallery.jpg" border=0 name="rollover"></a>
<a href="catering.php" onmouseover="document.rollover.src=button11.src" onmouseout="document.rollover.src=button12.src"><img src="images/catering.jpg" border=0 name="rollover"></a>
<a href="functions.php" onmouseover="document.rollover.src=button13.src" onmouseout="document.rollover.src=button14.src"><img src="images/functions.jpg" border=0 name="rollover"></a>
<a href="contact.php" onmouseover="document.rollover.src=button15.src" onmouseout="document.rollover.src=button16.src"><img src="images/contact.jpg" border=0 name="rollover"></a>

Thanks in advance.
James

 

[shockie]

it could be replaced with css. :blink:

 

[nasaboy007]

as stated, css would be much cleaner, faster, and better overall. you wouldnt need to worry about browsers having javascript enabled, etc.

just make classes in css and use like img:hover etc

 

[Tomi-gwc]

Thanks for the input, I'll bare that in mind for the future. I fixed this code for now so It's ok.