1

I've been using the basic gist of this tutorial to create links with background images that fade to different background images (using a sprite) on hover. This is basically done by putting an empty span inside the link which is hidden until hover, and then it fades in to view.

How can I do the same using a submit button input? I can't just put a span in because obviously you can't insert HTML inside an input tag since it is self-closing. So any other options?

One thing I was thinking was surrounding the input with a div of the same width/height and giving the div the hover background image, and on hover, fade the span out to opacity of something like 0.01 so that it would still be clickable but be transparent. Are there any better options or is this the way to go?

Mike Crittenden
  • 5,779
  • 6
  • 47
  • 74

2 Answers2

0

I think what you are really wanting to know (if I may say so), is how to use an image as a submit button in your form. Once you have that set up, using the fade method in jquery should be pretty simple.

Here is another SO question that shows how to use a background image for your button:

How to change an input button image using CSS?

Also notice that Safari does not allow the use of background images for buttons, so you'd need to hack this (similar to what you suggested using a div). The question above also covers this.

Community
  • 1
  • 1
Anthony
  • 36,459
  • 25
  • 97
  • 163
  • It's actually a little more complicated than that. I need to fade to a completely different image on hover, not just fade out the original. For a demonstration of the concept can be seen on the nav of http://dragoninteractive.com/ – Mike Crittenden Dec 06 '10 at 20:47
  • If you are fading to another image, you can use the `fadeTo` effect. The key thing (you probably know this already) is to disable the default form submit action and have the form get submitted via ajax. Otherwise, your form will submit before the user sees the fade. – Anthony Dec 06 '10 at 20:51
0

I ended up using this technique.

Basically, instead of adding a span INSIDE the element, you add a div AROUND the element and fade in the button on hover.

Mike Crittenden
  • 5,779
  • 6
  • 47
  • 74