Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.

I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.

What's the best way to do this?

_{(source: freemusicsoftware.info)}

Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.

I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.

What's the best way to do this?

_{(source: freemusicsoftware.info)}

• javascript
• html
• controls

3 Answers 3

There are a number of JavaScript plugins for doing this:

• Prototype demo

Just replace the images they're using with your images and you should be good to go.

Probably the best way is to create a real radio button, and then control the rendering of an element based upon the status on the radio button with javascript. If the radio button is selected, render background-a, else background-b (or use a sprite). Control the status of the radio button via the click event of your custom element.

Using this jQuery UI plugin, you can customize radio buttons and/or checkboxes to look however you want.