Change Submit button image with hover

Question

I have the following in an html form using method Post.

<input type="submit" title="" class="myclass" value="" />

and:

.myclass {
background: url(../images/image1.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

Basically, I need my form information to be posted using an image1.png button, and when hovered, image2.png would be called. Would you recommend CSS or javascript, and what would be the exact way to do it?

Thank you everyone, it's been answered!

Solution 1

Submit button:

<input type="image" title="" class="myclass" src="../images/image1.png" />  

CSS:

.myclass:hover {
background: url(../images/image2.png)  no-repeat; border: none;
width: 165px;
height: 59px;
}

Solution 2

If you can make use of jquery, have a look at this

Events/hover

Solution 3

Dont know why, but second answer didnt work for me, so i had to do so:

<input type="image" class="myclass" src="../images/image1.png" />

CSS:

.myclass, .myclass:hover {
width: 165px;
height: 59px;
}
.myclass {
background: url(../images/image1.png);
}
.myclass:hover {
background: url(../images/image2.png);
}