Альтернатива радиовходам

Question

Я пытаюсь создать систему, которая просит пользователей указывать, какой тип контента они отправляют, используя значки PNG для представления каждого типа. В идеале, что мне нужно, это группа из трех кнопок (с изображениями на них), которые ведут себя как переключатели - пользователь может использовать клавиши со стрелками для переключения между ними, они рассматриваются как одна группа, и так далее. Однако это кажется невозможным, и самое близкое, что я могу получить, это поместить изображения рядом с уже существующими переключателями. Есть ли хороший способ «подделать» эту функцию?

Answer 1

Я бы предложил использовать переключатели, поскольку пользователь распознает эти входные данные, и он будет работать без 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>

Затем вы можете поместить изображение внутри меток или, что еще лучше, фоновое изображение для дополнения текста.

Answer 2

Как насчет радио кнопок рядом с изображениями. Затем используйте JavaScript, чтобы скрыть переключатели и изменить (скрытое) выбранное радио при нажатии на изображение. Добавьте к этому эффект подсветки на выбранном изображении, и вы получите привлекательный интерфейс, который приятно ухудшается. JQuery или подобная библиотека JavaScript были бы полезны для достижения этой цели.

Answer 3

Конечно, сделайте два варианта каждого изображения (нормальное и выделенное) и используйте JavaScript, чтобы запомнить, какое из них выбрано, и переключать изображения.