[JavaScript] Mettere bordo ad immagine al click

[Allie]

Salve a tutti
Ho un problemino: in una pagina asp io visualizzo dinamicamente delle immagini, prendendole dal contenuto di una cartella. Quando clicco su un'immagine, il percorso di questa viene passato al DB tramite una casella di testo nascosta.

Ora, io vorrei fare sì che, in Javasccript, io possa mettere un bordo attorno all'immagine selezionata cliccandoci sopra, e, quando clicco su un'altra immagine, il bordo scompaia dalla prima e compaia invece nella seconda, e così via.
Il problema è che, visto che vengono generate dinamicamente, le immagini hanno tutte lo stesso nome, e quindi non so come fare :master:

function immagine(pic) { /* passa il valore del percorso dell'immagine cliccata e mette il bordo*/

   document.formy.foto.value = pic.src;  
   pic.border=1; }

Con questa funzione riesco a mettere il bordo all'immagine, ma ovviamente poi se clicco su un'altra lo mette anche a quella, non so come fare a dirgli di toglierlo e metterlo nella seconda cliccata... :master:

Il codice associato all'immagine è questo:

[img]<%=immy%>[/img]

Spero che possiate darmi una mano Mi hanno suggerito di usare getElementsByName(avatar) con un ciclo FOR, ma non so come fare...
Grazie mille in anticipo!

Dimenticavo: oltre a scegliere l'immagine, l'utente immette altri dati (nome, ecc.) nella pagina, quindi vorrei evitare di ricaricarla

[Mich_]

La cosa si puo` fare tramite JS e CSS.

Devi pero` essere piu` preciso e cercare di dare id diversi alle immagini (altrimenti fai errori HTML e poi non riesci a modificare il CSS tramite JS).

Ogni immagine deve essere del tipo (ad esempio)

[img]<%=immy%>[/img]

dove N deve essere unico ed essere inserito dal server, con lo stesso sistema del src (consiglio: un numero intero conseguente).

Poi lo script si riesce a scriverlo.

[Allie]

Grazie, ho fatto come dicevi tu

<img id="avatar<%=n%>" src="<%=immy%>"   onclick="immagine(this);">

ma per lo script non ci salto fuori, non capisco come devo fare, sono 2 ore che provo
Mi potresti dare un altro suggerimento, per favore?

[Mich_]

Ecco una bozza della funzione immagine():

var pic_prec = ""; // questo deve restare fuori dalla funzione

function immagine(pic) {
  if(pic_prec != "") pic_prec.style.border = 0;
  pic_prec = pic;
  pic.style.border = '2px solid red';
}

Questa e` una forma contratta. Non sono sicuro che funzioni.
In caso di problemi occorre salvare l'id di ogni oggetto e richiamarlo poi con document.getElementById(stringa):[code]

var pic_prec = ""; // questo deve restare fuori dalla funzione

function immagine(pic) {
  if(pic_prec != "") document.getElementById(pic_prec).style.border = 0;
  pic_prec = pic.id;
  document.getElementById(pic.id).style.border = '2px solid red';
}

[Allie]

Originariamente inviato da Mich_
Ecco una bozza della funzione immagine():

var pic_prec = ""; // questo deve restare fuori dalla funzione

function immagine(pic) {
  if(pic_prec != "") pic_prec.style.border = 0;
  pic_prec = pic;
  pic.style.border = '2px solid red';
}

Funziona!!!
Grazie mille!!!!!