Immagini come radiobutton

[Poltrav]

Salve a tutti

Breve spiegazione:
L'idea è quella di permettere ad un utente di scegliere il suo avatar.

Inizialmente pensavo di mettere di fianco ad ogni immagine un radiobutton vero e proprio.
Poi ho pensato di rendere il tutto un po' differente dal solito e più bello esteticamente e di far sì che le immagini stesse vengano selezionate e fungano esattamente come un radio button.

Così con poche righe di js ho fatto in modo che, quando un utente clicca sull'immagine, il bordo di questa si ingrandisce (per evidenziare la selezione) e il value un input hidden viene variato appunto a seconda del click.

Mi è riuscito tutto bene, ossia, il value della hidden viene modificato ed è pronto per l'invio e il bordo si visualizza.

Il mio problema sorge se clicco su due o più immagini. L'utente si ritrova con più immagini col bordo ingrandito confondendolo così sulla reale selezione.

Ecco, quello che mi servirebbe è trovare una strategia per "deselezionare", quindi togliere il bordo, alla vecchia immagine e finora non ho trovato una maniera. Se qualcuno ha dei suggerimenti gliene sarei molto grato.

Ecco il mio codice finora:

<script type="text/javascript">
function select_avt(nome_avatar, img_id)
{
// Modifico il valore del campo hidden
document.getElementById("hidden_value").value = nome_avatar;

// Imposto il bordo a 3
document.getElementById(img_id).border = 3;
}
</script>

[img]avatar.jpg[/img]

<input type="hidden" id="nome_avatar" value="" />

[cavicchiandrea]

Devi fare un ciclo

<script type="text/javascript">
function select_avt(nome_avatar, img_id)
{
var iconavatar = document.getElementsByTagName("img")
document.getElementById("hidden_value").value = nome_avatar;
for(var i=0; i<iconavatar.length; i++){
// Imposto il bordo a 3
if(iconavatar[i].className == 'avatar' && iconavatar[i].id == img_id){
iconavatar[i].style.border = 3;
}else{
iconavatar[i].style.border = 0
}
}
}
</script>

[img]avatar.jpg[/img]
[img]avatar1.jpg[/img]
<input type="hidden" id="nome_avatar" value="" />

Non l'ho testato.

P.S. Benvenuto su html.it

[Poltrav]

Preso e riadattato al mio scritp, funziona bene =) grazie 1000

[XWolverineX]

Si potrebbe fare in modo a mio parere migliore utilizzando jquery