Mouse over effect help

I have the following code for a sign up form. I want the button to change when the mouse hovers over. Can someone help me? The button that I want it to change to is: sign_up_mouseover.png

<ul class="site-nav2">
<p>&nbsp;</p>
<FORM ACTION="https://app.expressemailmarketing.com/Survey.aspx?SFID=75036" METHOD="POST">
<div align="center"> <span class="style20"><FONT FACE="arial, helvetica">Sign up for our Mailing List
</FONT></span>
<BR>
<input type="TEXT" name="email" />
<BR>
<INPUT TYPE="IMAGE" SRC="images/sign_up.png" ALIGN="ABSMIDDLE" BORDER="0" />
<INPUT TYPE="HIDDEN" NAME="SkipSurvey" VALUE="FALSE" />
</div>
</FORM>
</ul>




Thanks
Jamie

 

This will require a simple javascript function in combination with the onmouseover element within your img tag. Try googling: "Switch image onmouseover"

 

do you have dreamweaver or other web program? it would be real easy if you do
like the user above said, you're looking for some java script and google is your next best option

 

Easy....just add the title attribute...see example:

<INPUT TYPE="IMAGE" SRC="images/sign_up.png" ALIGN="ABSMIDDLE" BORDER="0" title="Hover text" />

 

hmm, for this I will suggest, code for CSS

and code for input button

and you can replace background-color to background-image,
to get the desired effect.

 

If you want to use images like you did, this is pretty simple - AND NO, you do not need javascript for it in any modern browser.

Though first I'd suggest ditching the HTML 3.2 style markup and attributes you shouldn't even be using anymore.

The trick is to wrap the button in an anchor.

<a class="stateButton">
	<input type="image" src="images/sign_up.png" alt="Sign Up" />
</a>

Code (markup):

This will assume your two button images are 100x32. Combine them to a single 100x64 image one atop the other.

.stateButton {
	display:block;
	position:relative;
	width:100px;
	height:32px;
	overflow:hidden;
}

.stateButton input {
	position:absolute;
	display:block; /* IE Fix */
	top:0;
	left:0;
	width:100px;
	height:64px;
}

.stateButton:active,
.stateButton:focus,
.stateButton:hover {
	display:inline; /* IE fix */
	top:-32px;
}

Code (markup):

The anchor block container gives us our hover state hook even in IE. By sizing it to the input we'll show it should never fire a click anyways. We make the anchor half the height of our image so it only shows the top half thanks to the overflow state. When we move it up -32px on hover, the lower half is revealed. Oh, IE will sometimes 'stick' in one hover state or the other unless you set each to a unique display state. It's just wierd that way.

Only 'problem' with this approach is that CSS off the user will see both images... But the advantages of no scripting and using only one image file instead of two far outweighs the negatives in my book.

Oh, and don't forget your alt text - INPUT is just like IMG in that way. Not everyone has images on.

The technique of sliding the element inside a overflow:hidden container can also be handy when building a image-replacement sprite menu in that it can mean a LOT less CSS. Slide a background around on a span for the unique button, but slide the span around inside the anchor for the hover states. I just did that with the menu on this rewrite I did for another thread here:

[url]http://www.cutcodedown.com/for_others/2kungfu4u/template.html[/url]

Single image file handles the whole menu, while still using a proper list to build it.
[url]http://www.cutcodedown.com/for_others/2kungfu4u/images/mainMenu.png[/url]

Slide the background in the span up and down based on the LI's class, slide the span left and right for the hover states. Pretty damned slick.