Alternative to radio inputs

Question

I am trying to create a system that asks users to indicate what content they represent, using PNG icons to represent each type. Ideally, I need a group of three buttons (with images on them) that behave like switches - the user can use the arrow keys to switch between them, they are considered as one group, etc. However, this seems impossible, and closest I can place the images next to the existing switches. Is there a good way to "fake" this functionality?

Answer 1

I would suggest using radio buttons as the user will recognize these inputs and it will 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>

Then you can put the image inside the labels or, better, the background image in addition to the text.

Answer 2

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

Answer 3

. JavaScript, () . - hightlighting , , . JQuery JavaScript .