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

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.