CODEWITHSUNDEEP
javascriptcsshovermouseover
skarama
skarama

Reputation: 497

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!

Upvotes: 4

Views: 14894

Answers (4)

tsuma534
tsuma534

Reputation: 198

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

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382696

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

Upvotes: 8

Kenert
Kenert

Reputation: 11

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

Upvotes: 1

Adriaan Stander
Adriaan Stander

Reputation: 166396

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

Events/hover

Upvotes: 3

Related Questions