...

View Full Version : Using images like radio buttons?



Beau
06-14-2004, 11:24 PM
This may be more of a general programming question than a Javascript question, but I hope it's ok that I post here since Javascript is the language I am having to do this in.

I have three buttons, each with an "up" and a "down" state. Just like a set of radio buttons, only one can be selected (or in the "down" state) at any time. Clicking an unselected button will reset the previously selected button back to it's "up" state and so-on.

I know how to pass the appropriate value to the form based on which of the three buttons is down, but I'm having trouble coming up with an elegant way to toggle between the three buttons correctly (I can If-Then-Else it to death, but that just looks shaggy).

Does anyone have any suggestions for how I could approach this or know of any examples that might offer me insight?

neofibril
06-15-2004, 01:46 AM
Here is an example w/ buttons.



<html>
<head>
<style type="text/css">
button
{
border:2px outset;
}
.toolbar
{
text-align:center;
background:buttonface;
border:2px outset;
margin:1em;
padding:1em;
}
.up
{
border:2px outset;
}
.dn
{
border:2px inset;
background:buttonhighlight;
}
</style>

<script type="text/javascript">
var on;
function setState(el)
{
if(el != on)
{
if(on)
on.className = "up";
el.className = "dn";
on = el;
}
}
</script>

</head>
<body>
<div class="toolbar">
<button onclick="setState(this)"> - 01 - </button>
<button onclick="setState(this)"> - 02 - </button>
<button onclick="setState(this)"> - 03 - </button>
<button onclick="setState(this)"> - 04 - </button>
<button onclick="setState(this)"> - 05 - </button>
<button onclick="setState(this)"> - 06 - </button>
<button onclick="setState(this)"> - 07 - </button>
<button onclick="setState(this)"> - 08 - </button>
<button onclick="setState(this)"> - 09 - </button>
</div>
</body>
</html>


The same sort of thing would work for images; just change the class information appropriately.

Beau
06-15-2004, 02:19 AM
brilliant! Thanks a ton.

Beau
06-15-2004, 09:02 PM
I have a long ways to go to get this integrated into my app, but I thought you might like to see a working model of the button structure using your code suggestions. I've got to get more attuned to thinking of manipulating styles like this, this is awesome!

http://www.halibutharpoon.com/dev/alignmentbuttons.html

You don't see any problems or potential pitfalls there, do you?

neofibril
06-16-2004, 04:19 AM
The only thing I noticed was a delay in loading the background on the first click.
To make that down image immediately available, placing something like this at the bottom of the page might work:

<span class="dn" style="visibility:hidden"></span>

neofibril
06-16-2004, 07:22 PM
I put together a script for setting default state images, which incorporates your array idea.

Check it out here, if you'd like: Discuss: Images as Radio Buttons (http://www.webxpertz.net/forums/showthread.php?t=29361)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum