Ciao, dal momento che il contesto è un modulo di invio dati, penso sia giusto utilizzare proprio dei radio button, come faresti normalmente, così da poter sfruttare il value da spedire al server come "significato" dell'immagine.
Puoi quindi creare un sistema che associ un'immagine ad ogni radio button e visualizzi quella relativa alla scelta effettuata.
Personalmente risolverei col solo CSS (quindi senza JavaScript), usando qualche trick e un po' di fantasia.
Qui un Pen realizzato in base alle tue indicazioni:
https://codepen.io/OpenDec/pen/QWeOBga
Il sistema utilizza dei gruppi di normali input radio inseriti dentro un contenitore (radio-img-group). Ogni input dovrà essere seguito da un <i> in cui sarà contenuta l'immagine impostata come background via CSS.
Non sto a commentare il codice riga per riga ma se hai dubbi o domande, chiedi pure.
Dagli magari uno sguardo e vedi se può andare bene così. In tal caso puoi prenderlo come base per integrarlo nel tuo elaborato.
Fai sapere.


Rispondi quotando