Change Submit button image with hover

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!

---

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;
}

---

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

Events/hover

---

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);
}

---

The CSS approaches haven't worked for me, but this one did (vanilla JS):

<input type="image" src="../images/image1.png" onmouseover="this.src='../images/image2.png';" onmouseout="this.src='../images/image1.png';"/>