MouseOver for Form Submit Button image?

masonbarge · October 30th, 2006, 10:02 AM

Is there any way to use an image for a submit button in a html form and have a js mouseover effect, without using js as the submit handler?

I've tried everything I can think of. I even did a page link to a hidden input (the rollover worked fine but it wouldn't submit). Apparently MouseOver is not native to the <input> tag.

ukgeoff · October 30th, 2006, 10:52 AM

Code:

<input class='button' id='subButton' name='subForm' type='submit' value='submit' title='Activating this button validates your input and if ok, submits the form for processing. An invalid form is returned with your content in tact and error messages displayed.' tabindex='11' />

Straight off one of my pages.

Style the element in the usual way and use :hover to produce your rollover effect.

Note the bit I've highlighted.

masonbarge · October 30th, 2006, 11:44 AM

Thanks Geoff, but I'm trying to get an image rollover. It's for a nice small insta-load page and I thought I'd have some fun with the button.

I could put the whole list in Flash except I'm even more deficient in Flash than my other |\|o06 $Killz.

ukgeoff · October 30th, 2006, 12:13 PM

Yes, I understand that.

Just create styles for your buttons that include e.g., background-image: normal.gif, and in your :hover style, background-image: rollover.gif.

masonbarge · October 31st, 2006, 07:58 AM

OK, I see what you mean now. Actually finally figured it out, LOL, I wish I'd checked back here and saved some time.

Thanks for the help.