Solved

Custom Submit Button Hover Effect

Posted on 2010-09-08
4
728 Views
Last Modified: 2012-08-13
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
Comment
Question by:brettsky07
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33630917
try this

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

0
 

Author Comment

by:brettsky07
ID: 33631012
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
 
LVL 3

Accepted Solution

by:
Marbleman earned 250 total points
ID: 33631277
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
 

Author Comment

by:brettsky07
ID: 33631445
Good stuff. Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now