Link to home
Start Free TrialLog in
Avatar of brettsky07
brettsky07Flag for Canada

asked on

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!
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

try this

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

Avatar of brettsky07

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Marbleman
Marbleman

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Good stuff. Thanks!