Immagine che cambia al click e poi invia valore

[ricman]

Ciao, non so se il metodo e la sezione giusta sia questa... Vorrei fare in modo che una immagine, al click, venisse sostituita da un'altra, e poi al click da un'altra, e poi al click da un'altra ancora, e poi di nuovo click per tornare alla prima (un loop).
E che il "significato" dell'immagine scelta venisse poi inviato ad una pagina php che elabora alcuni dati.

Tipo una tabella

Mario Rossi     Si/No/NonSo/MagariSi/Altro
Gianni Versi    Si/No/NonSo/MagariSi/Altro
--------------------
||SALVA||

Dove per il Si/No/NonSo/MagariSi/Altro che in un altro caso metterei, chesso', 5 Input di type Radio di un form affiancati... Invece vorrei mettere al posto suo il discorso delle immagini che cambiano al click...

[KillerWorm]

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.

[ricman]

Mi pare un'ottima soluzione!
Non sono sicuro se il name (mariorossi, gianniversi, etc) sia giusto scriverlo così (arriva dal php, quindi posso generarlo come voglio) ma il resto è veramente ben fatto.

[KillerWorm]

Bene. Certo, per il name puoi mettere ciò che vuoi, l'importante è specificare uno stesso name per ciascun relativo gruppo di radio, serve poi per recuperare il valore selezionato una volta che i dati arrivano al server.

Per il resto prendi il mio esempio giusto come base, poi lo puoi adattare secondo le tue esigenze.

Buon proseguimento