Alternative to radio inputs

Question

I'm trying to make a system which asks users to specify what kind of content they are submitting, using PNG icons to represent each type. Ideally, what I'd like is a group of three buttons (with images on them) which behave like radio buttons - the user can use arrow keys to switch between them, they are treated as one group, etcetera. However, that appears to be impossible, and the closest I can get is putting the images alongside the pre-existing radio buttons. Is there a good way to 'fake' this functionality?

Answer 1

Sure, make two variants of each image (normal and highlighted) and use JavaScript to remember which one is selected and switch the images.

Answer 2

I would suggest using radio buttons as a user will recognise these inputs and it'll work without javascript.

<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>

You can then put an image inside the labels, or better, a background image to supplement the text.

Answer 3

How about radio buttons next to the images. Then use JavaScript to hide the radio buttons and change the (hidden) selected radio when an image is clicked. Combine that with some sort of hightlighting effect on the selected image, and you have an attractive interface that degrades nicely. JQuery or a similar JavaScript library would be useful in achieving this.