Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 742
  • Last Modified:

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!
0
brettsky07
Asked:
brettsky07
  • 2
1 Solution
 
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
 
MarblemanCommented:
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
 
brettsky07Author Commented:
Good stuff. Thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now