Re: button element with image in it

Marek Mänd <cador.soft (AT) mail (DOT) ee> wrote:

Can the

button><img></button

[be] mutated via CSS

Absolutely maybe. But the first point to note is that the <button>
element is essentially unreliable in authoring for the WWW, due to lack
of correct support in browsers.

Use a submit button instead. Or, if you insist, an image submit button,
see http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Test that the form works. _Then_ start considering styling.

so, that the inner image of <BUTTON
would entirely visually become the button itsself

Then there's hardly any point in using <button>, instead of
<input type="image">.

Using the <img> as an background image for buttons isnt
an option because it would crate a CSS bloat declarations.

That statement does not quite parse. But setting a background image for a
normal submit button, <input type="submit">, is of course one possibility
in styling. It may confuse the user, since it won't really _look like_ a
submit button then, but this problem is shared by any attempt to use an
image for a button.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Marek Mänd <cador.soft (AT) mail (DOT) ee>:

a saved pure html page without images and without stylesheets

button type="button"><img src="unexistant"><span
style="display:none">commandbutton spare label for offsite
use</span></button

would perform better than a <input type="image" src="unavailable"

Oh please, don't act as if you had never heard of the 'alt' attribute (of
'img' and 'input' as well), nor understood it.

Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">...

I haven't checked, but hasn't 'button' to be a descendant of a 'form', too?

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain

Marek Mänd <cador.soft (AT) mail (DOT) ee> wrote:

Then there's hardly any point in using <button>, instead of <input
type="image">.

Well IMHO there could be some advantages:

You should consider the sure disadvantages first.

Consider situation:
a saved pure html page without images and without stylesheets

Is this about authoring for the WWW, which is the topic in
comp.infosystems.www.authoring groups? Well, maybe, as long as you
consider how to make pages that work on the WWW without images and style
sheets too. (How about working without JavaScript?)

button type="button"><img src="unexistant"><span
style="display:none">commandbutton spare label for offsite
use</span></button

would perform better than a <input type="image" src="unavailable"
with a tooltip.

No reason to mess around with tooltips.

They both perform worse than <input type="submit">.

And <input type="image"> works on most browsers if you specify adequately
the attributes that might be used as textual replacements for the image
(alt, name, value).

Besides tooltips everywhere in the document can be
quite frustrating.

I did not mention any tooltips. Where did _you_ get the idea of putting
them everywhere?

I am against flashy title
tooltips, there is a status bar for that.

No it isn't. The status bar is for the browser to show the status.
Disturbing that classifies a page as nerdishly childish.

Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">...

You didn't mention what kind of a button you have. On the WWW, it is best
to try and make all buttons submit buttons so that you can have a server-
side backup, even if you normally use client-side scripting for the
actions invoked by the buttons. If that's not feasible, make them look as
much like normal default-style buttons as possible. And that's quite
possible: you simply use <input type="button">, naturally in code that
has been generated by client-side JavaScript code and with an explanation
in a <noscript> element, to avoid frustrating users that are using
JavaScript-disabled browsers. The key point is to do nothing in order to
change the appearance, to maximize the odds that people understand
buttons as buttons and not as fancy decoration or something.

Yes it can be WAd via JS, but thats
overhead.

Yr abbrs r probly bout something off-topic.

Well those images for buttons would actually be different in web
application, thus for earch image a style class is too much. As icons
are much easily to be changed in serverside scripting templates than
in CSS (which just adds too much complexiti and dependancies)

Sorry, that does not parse either. If you had originally posted a URL
that demonstrates the context and problem, maybe some specific advice
could have been given.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Christoph Paeper <christoph.paeper (AT) nurfuerspam (DOT) de> wrote:

I haven't checked, but hasn't 'button' to be a descendant of a
'form', too?

No. All form fields may syntactically appear outside <form> elements too.
Mostly it does not make sense, but there are special cases like
<input type="button"> or <button type="button"> without server-side
backup. However some old browsers fail to render form fields outside
<form> elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/