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 remend CSS or javascript, and what would be the exact way to do it?

Thank you everyone, it's been answered!

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 remend CSS or javascript, and what would be the exact way to do it?

Thank you everyone, it's been answered!

• javascript
• css
• hover
• mouseover

• With help yes I guess I could give it a try, although I am not familiar with it at the moment! – skarama Commented Dec 17, 2009 at 6:21

4 Answers 4

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';"/>