Radio button that looks like a button?

[Martin]

Is there any way I can make a radio button look like an actual button
instead of the standard little round circle? I would like to have an
array of 5 buttons such that when one is pressed "in", the others are
all "out". IOW, like actual old-fashioned radio buttons.

[Beauregard T. Shagnasty]

Martin wrote:

I guess you want something like these?
http://img.zdnet.com/techDirectory/RADIO.GIF

I spent several minutes googling but didn't turn up any individual
On/Off button graphics. If you are good with a graphic editor, perhaps
you can create your own two graphics, or even crop out parts of the
RADIO.GIF above.

Then, of course, you need some sort of code to switch between one or the
other when they are clicked. To me, it feels like too much effort for
the resultant effect, as people are used to seeing the "standard little
round circle" ...

--
-bts
-Friends don't let friends drive Windows

[Jukka K. Korpela]

Martin wrote:

That's a very bad idea. Consistency is the key design principle you should
have especially when designing interactive elements such as forms. For an
old and very sound argument in favor of this, check item #3 at
http://www.useit.com/alertbox/990530.html

Now, assuming you want to create a nasty effect for the "amusement" of some
friends or when volunteering to "redesign" (= ruin) your competitor's web
site, there would be two basic approaches:
1) Use style sheets to modify the apperance of <input type="radio" ...>
elements. This appears to be tricky, if not impossible, at the current level
of CSS specifications and implementations.
2) Use other elements, such as <input type="image" ...> or
<button>...</button>, to create the visual effect and JavaScript to make
them behave like radio buttons (when JavaScript is enabled).

Should you like to make the page functional when JavaScript is off, you
could use approach #2 modified so that in HTML markup, the elements are
<input type="radio" ...> and JavaScript code then changes them to other
elements.

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

[Jan C. Faerber]

On Nov 22, 5:50 pm, "Beauregard T. Shagnasty"

> Then, of course, you need some sort of code to switch between one or the
> other when they are clicked.

bing! http://www.lovedieu.eu/alt.html/radio.html

[Jan C. Faerber]

Now I fixed the js - so you can click into the picture -
you have imagemaps for your 'radiobuttons' to
change the pic AND to check your relating radio buttons.
http://www.lovedieu.eu/alt.html/radiocube.html

[Tim Streater]

Well, I would never have guessed that they were radio buttons.

--
Tim

"That excessive bail ought not to be required, nor excessive fines
imposed, nor cruel and unusual punishments inflicted"

Bill of Rights 1689

[Jan C. Faerber]

On Nov 22, 10:30 pm, Tim Streater <timstrea...@waitrose.com> wrote:

> Well, I would never have guessed that they were radio buttons.

Yes - they look crap now.
You have to change them to some nice photoshop cristal buttons or even
animated gifs with streams of light etc...
That is just to demonstrate the idea. :D

[Martin]

On Sun, 22 Nov 2009 08:51:51 -0700, Martin <ironwoo...@gmail.com>
wrote:

Thanks to all. I thought maybe it was just a matter of specifying a
parameter - I didn't realize it was such a big deal. I'll probably
just stick with the "little round circles". (but I have saved that one
example - it might come in handy some time).

[Jan C. Faerber]

http://www.lovedieu.eu/alt.html/radioround.html

I got it done better now with single button pics.
hm... only... you can not change the big buttons by simply
clicking the small radio standard buttons in my form.
Maybe there is a workaround - but in the form you
can not unselect a radio button by clicking on it by default.
Here you can click on the big button pics again and unselect
them.
It depends on what you want.

[Jan C. Faerber]

On Nov 22, 11:40 pm, Martin <ironwoodcan...@gmail.com> wrote:
> On Sun, 22 Nov 2009 08:51:51 -0700, Martin <ironwoodcan...@gmail.com>

Right, if you use only three buttons you probably become a great
trumpet player - like Miles Davis (o;