Solved

Custom Submit Button Hover Effect

Posted on 2010-09-08
4
735 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

688 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