Rollover Submit Button

Hello there,

It seems I always arrive at this point and can't figure it out. I'm putting together an announcement list, and not only do I want to use my own submit and unsub buttons, but I want them to maintain their rollover nature. However, whenever I add any part or all of the K-Base's suggested

<input type="image" border="0" name="submit" src="subscribe.gif">

I loose the rollover effect. Here's the latest submit button that I'm working on (I use Dreamweaver):

<td><a href="#" onFocus="if(this.blur)this.blur()" onMouseOver="MM_swapImage('subscribe_but_r1_c2','','graphix/subscribe/subscribe_but_r1_c2_f2.jpg',1);" onMouseOut="MM_swapImgRestore();"><img name="subscribe_but_r1_c2" src="graphix/subscribe/subscribe_but_r1_c2.jpg" width="150" height="50" border="0" alt=""></a></td>


Could you please take a look at the code, and let me know how to have my cake and eat it too?

Thanks much for your time.

White Ash
www.White-Ash.com

I don't see anything in that code that makes that button actually submit, or do anything else when clicked on; is that part to be added later?

Using <A HREF="#"> is a bad idea; it causes the browser to jump to the top of the page (or maybe the bottom of the page in some browser versions?) and add an extra URL to the back-button stack. You can suppress this by including "return false" at the end of whatever JavaScript event handles clicking on the button, but even better would be to make the HREF attribute something meaningful that lets your site degrade gracefully for non-JavaScript users. (Unfortunately, there's probably no way to gracefully duplicate a form submission with a plain HREF, so going to your code instead of a normal submit button is a bad idea for accessibility.)

You should also have more meaningful ALT text than an empty string.

-- Dan

> I don't see anything in that code that makes that button actually
> submit, or do anything else when clicked on; is that part to be
> added later?

In my experience, there's usually nothing wrong with submitting a form with an "image input type" - I do it all the time. It shouldn't even require Javascript.

Whether or not it works in this particular form, though, is another story. I don't know.

- Jeff @ DreamHost
- DH Discussion Forum Admin

but that's a standard image tag /not/ an image form element in her example.

Does this work?

<input type="image" border="0" name="subscribe_but_r1_c2"
src="graphix/subscribe/subscribe_but_r1_c2.jpg"
onMouseOver="MM_swapImage('subscribe_but_r1_c2','','graphix/subscribe/subscribe_but_r1_c2_f2.jpg',1);"
onMouseOut="MM_swapImgRestore();" >

Edited by Crys on 05/02/03 03:54 PM (server time).

You should include alt="Subscribe" in that so that text-mode browsers see what the button does.

-- Dan