Solved

Custom Submit Button Hover Effect

Posted on 2010-09-08
4
724 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

21 Experts available now in Live!

Get 1:1 Help Now