I learned how to do javascript image rollovers using code I found in a site point tech times newsletter. It works great with href images, but I can't get it to work for a "form submit" image.

Can someone help me?

Here's the code I'm using: (don't worry, I included the script opening and closing tags)

if (document.images) {
image1up = new Image();
image1up.src = '../images/submitbutton.jpg';
image1over = new Image();
image1over.src = '../images/submitbutton_over.jpg';
image2up = new Image();
image2up.src = '2up.gif';
image2over = new Image();
image2over.src = '2over.gif';

<input type="image" src="../images/SubmitButton.JPG" class="form" name="thebutton" onMouseOver="document.thebutton.src=image1over.src" onMouseOut="document.thebutton.src=image1up.src">

When I mouse over the button, I get an error telling me that document.thebutton is null or not an object.

Help!