Custom Submit Button Hover Effect

Hello. I have a customer image instead of the standard submit button on my form. I was wondering if there is any way to give it a hover state (image swap on rollover)? I have done this with css a few times but for some reason it is not working. I am thinking maybe it is because it is not an a href link but an src=? I need to be sure that it is also cross browser compatible.. or as much as possible. Any suggestions would be great. Thanks!
brettsky07Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
MarblemanConnect With a Mentor Commented:
replace your <input type="image"... whith this:

<img src='images/login_btn.gif" onmouseover="this.src='images/login_btn_active.gif';" onmouseout="this.src='images/login_btn.gif';" onclick="document.getElementById('myForm').submit();" style="cursor: pointer;"/>

also change
<form action="login.php" method="post" id="myForm">

Probably you can also simply add the onmouseover/...out stuff to your input-image. But I often had trouble with those image-buttons...

0
 
Gurvinder Pal SinghCommented:
try this

<img src='image1.gif' onMouseOver="this.src='image2.gif';" onMouseOut="this.src='image1.gif';">

0
 
brettsky07Author Commented:
Im not sure exactly how to incorporated that to my form... Code is below. Does it need to be in script tags?
<table>
<form action="login.php" method='post'>
<tr><td align="left">Username:</td></tr>
<tr><td><input type="text" name="username" size="30"/><br /></td></tr>
<tr><td align="left">Password:</td></tr><tr> <td><input type="password" name="password" size="30"/><br /></td></tr>
<tr><td>&nbsp;</td></tr><td align="right"><input type="image" name="submit" id="submit" src="images/login_btn.gif"/></td></tr>
</form>
</table>

Open in new window

0
 
brettsky07Author Commented:
Good stuff. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.