Rollover submit button in valid XHTML strict

How to make a cross-plattform compatible rollover submit btn in valid XHTML

[Bonusbana]

I had a problem. I wanted to make a rollover submit button in valid XHTML strict. In XHTML transitional or HTML 4 we can define a form name and then call the submit with a javascript: <a href="javascript:document.forms['form_name'].submit();">OK</a>

But since XHTM strict does not allow the <form name="name">, I had to do it another way. This is how I did it:

First I created an image with two 18px high and 30px wide buttons on top of each other, so the total image would be 36px high. The top 18px would be the "off" image and the bottom 18px the "on", like:

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

I called this "ok.gif"

Then I made a transparent gif 18px high and 30px wide called "ok_trans.gif"

Then I coded:

Javascript:

function rollover(id,param,dist,text) {
if (browserNew) {
d = document.getElementById(id);
d.style.backgroundPosition='0 -'+dist;
}
else {
d = document.all[id];
d.className = id+'_'+param;
}
if (param == "off") {
stat('');
}
else {
stat(text);
}
}

CSS:

.btn_ok_off {
display:block;
width: 30px;
height: 18px;
background: url("img/ok.gif") no-repeat 0 0;
}
.btn_ok_on {
display:block;
width: 30px;
height: 18px;
background: url("img/ok.gif") no-repeat 0 -18px;
}

HTML:

<form method="post" action="index.htm">
<p><input name="email" class="input" type="text" /></p>
<p><input type="image" id="btn_ok" src="img/ok_trans.gif" class="btn_ok_off" onmouseover="rollover('btn_ok','on','18px','ok');" onmouseout="rollover('btn_ok','off','0','ok');" onclick="rollover('btn_ok','off','0','ok'); this.blur();" /></p>
<p class="hidden"><input type="submit" value="ok" /></p>
</form>

Note: the last "<p class="hidden"></p>" is for users with CSS turned off.

This way, I produced a fast rollover submit button that validates in XHTML strict! I dont know if its the best way, but still...

Anyone have a better idea?

[edited by: tedster at 6:21 pm (utc) on Mar. 10, 2004]

[grahamstewart]

What happens to the 10% of users who don't have Javascript turned on?

[Bonusbana]

The users with javascript turned off will still se the "off" image without the rollover effect.

[rogerdp]

Why put the <input> in a <p>? Why not..

<input class="hidden" type="submit">

[R1chard]

CSS will solve your problem.

:hover

[grahamstewart]

The users with javascript turned off will still se the "off" image without the rollover effect.

Yeah, but will they still be able to submit the form?

Why not just use the :hover property as R1chard suggests?

[Bonusbana]

Thats the problem, the :hover only works with <a> tags in explorer. Thats why I made the DOM javascript to make it cross-browser and plattform independent.

However, mozilla or firebird supports the :hover on any object, f.ex a div or class.

No, the <p> is not necessary before and after the <input> tag, but if you f.ex add some content in the input field you must add a <p> tag to make it valid strict xhtml. At least, thats how I understand it. Maybe Im wrong__?

[Bonusbana]

The users with javascript turned off will still be able to submit the form.

[grahamstewart]

The users with javascript turned off will still be able to submit the form.

I'm not sure how. The submit button is hidden and onclick event won't happen.

But since XHTM strict does not allow the <form name="name">

True, but it does allow

<form id="name">

[Bonusbana]

No, the <input type="image"> works as a submit btn. And its not the onclick event that triggers the submit, its the image itself, so the submit works whithout javascript. Its only the rollover effect that fails when javascript is turned off.

You are right, I could use the <form id="name">, but then I would have the problem you describe: I would have to use a javascript:

javascript:document.forms['name'].submit();

to submit the form, which makes it unsubmitable for users with javascript turned off.

Im aware of that my solution is a bit uncomfortable and large, but from what i know, its the only secure way of producing what I desired. If you have a better solution, please inform me.

[R1chard]

I still prefer my one line of css over your 36 lines of javascript/css/html. It's MUCH neater and much simpler.

And the functionality is 100% compatible with every browser from the last 13 years (even non-standards-compliant ones). And it'll be compatible with every new browser in the future (unlike your code).

So what if IE users don't get the fancy rollover? It's their fault for using a broken browser. I've given up doubling the time and effort I put into creating pages (not to mention adding to the filesizes), just to overcome the quirky problems with IE. If you remember, Netscape 4 didn't support text link hover colors, but that didn't mean everybody wrote extra code to force it to happen.

The IE users won't know what they're missing, and it won't crash or slow down (unlike over-ambitious javascript) so they won't think anything is wrong. They will eventally upgrade (if and when IE7 gets bundled with their OS), so who cares?

[Bonusbana]

I see what you mean, and I agree of course. The CSS solution is no news for me, and it is a much better solution in many ways. But this topic was about creating a rollover submit button that works.

Using a DOM javascript is not fancy nor over-ambitious. I see it as a pretty secure way of getting a true cross-plattform browser independent solution. As an example, k10k uses a large amount of DOM javascripts, just to get that final touch to work everywhere. Its about creating an overall fantastic user experience, no matter what plattform or browser they have.

So what if IE users don't get the fancy rollover? It's their fault for using a broken browser.

Now this is a completely different subject, and I totally disagree. It's not their fault, they just never made an effort to examine alternative browsers, which I seriously don't blame them for. And remember, we are talking about 80% - 90% of the internet users. I am still going to accept this fact and design my pages for broken browsers, and that may include a fancy rollover effect.

david

[R1chard]

It's funny- a lot of lazy webmasters use this "90%" excuse so that they can ignore everything and so that they don't need to fix the problems in their pages.

But you're bringing up this pointless and meaningless statistic so that you can actually do 10 times as much work as is needed!

(oh, and maybe those people didn't examine another browser because the webmasters pampered them and hacked their sites to work in their defective browser. If they were missing out on something, they might wonder why and see about upgrading!)

I don't get it. Do/did you write pages of workaround code to force Netscape 4 to color link text on hover? (Remember that when it came out it had a market share of over 70%, and this was a time when mouseover was the hot topic)

Come to think of it, Combobox widgets and Spincontrol widgets don't exist in html, but I don't see many of them getting replicated using Javascript or anything else.

Use the one-liner standard cross-platform way of doing it. That's what it was designed for. It works in Mozilla/Netscape/Firebird and probably Opera/Konqueror/Safari, and it will work with future versions if IE. That's as cross-browser as I need. We can't let ourselves be held up indefinately by a 5 year old browser. In the meantime, your compliant-browser using visitors are having their experience ruined by some unneeded bloated code that needs to transfer and run.

[Bonusbana]

pointless and meaningless statistic.

Id say the statistics are pretty valuable.
I design branded pages for a large amount of visitors, and the pages needs to work in IE, or else I dont have a job anymore. Are you suggesting that I should sniff out their IE and bring up a "dumb ass" sign and pointing them to a upgrade link, just because me & my nerd friends has a better opinion about browsers? What should I tell my client when his page doesnt work properly for 90% of the users? That its their fault?

No, I did not write javascripts for NN4 to support the :hover on my pages. But then again, at that time I was doing mostly print work.

Also, combining javascript and CSS is the best way to please everyone, even your standard compilant friends. A dom javascript doesnt ruin anything, it just extends the feature to a wider group of users.

Until the stats are better, wich Im sure they are soon, I will keep on scripting for maximum cross-browser compability.

[R1chard]

No, what I was saying was that most lazy webmasters use the "90%" as an excuse to leave things in even if they don't work.

But in your case, the page WILL still be 100% functional in all browsers if you use the standards. It won't be broken- it's just that some users won't get a flashy rollover that they couldn't care for in the first place. They don't really want that stuff, and if they don't know they're missing it, then so what? The page will be functional, and in return it will load and display a lot quicker for ALL users.

[mep00]

What about cell phone/PDA users? While still a very small percentage of the surfers, they are the most likely to have money. Also, over the next few years the percentage is likely to increase sharply. What about diabled users? Will it work in text olny browsers?

As far as browser sniffing goes, why not? That way everybody gets the best page for their browser.

[Bonusbana]

They don't really want that stuff, and if they don't know they're missing it, then so what?

How would you know what "they" want? How would you even know who "they" are in this case? Indeed, 50+ users with a PhD in literature dont care about rollovers, but some people actually care about the design, details and looks, believe me.

Hey, lets not start a war here, you do your design and I do mine. I was just showing an example of getting a rollover effect to work cross-browser. If youre not interested, fine with me.

What about cell phone/PDA users? While still a very small percentage of the surfers, they are the most likely to have money. Also, over the next few years the percentage is likely to increase sharply. What about diabled users? Will it work in text olny browsers?

If a rollover effect will work in text-only browsers? Well...

My point is that its not about either a flashy unstable and inaccessible website or an accessible fast but oh-so-boring one. You can do both, and still pull of a great design and nifty details in addition to standards and accessability.

[R1chard]

Fair enough Bonusbana. It's not worth arguing about. I would do it the short/easy/fast/standard/low-power CSS way, but I guess you can do whatever you want as long as it validates.

mep00 "Will it work in text olny browsers?"

Yeah, the CSS solution will work in all browsers ever made. Provided they support forms, that is! You don't even need Javascript. It's compatible with Lynx and cellphones and screenreaders.