Mostra/Nascondi immagini con stesso ID

[bibuz]

Salve ragazzi ho un quesito da provi:

Ho la necessita di dare all'utente di mostrare o no le immagini nella pagina che sta visitando.
Le immagini vengono estratte in maniera dinamica da un database.

Ho trovato uno script che mi permette di mostrare o nascondere l'immagine e funziona bene se mostro un solo record del database.

Appena applico un'area ripetuta le funzione mi mostra o nasconde solo l' immagine del primo record mentre le altre non subiscono cambiamenti.

Vi posto lo script:

  <script>
   function changeImg(image) {
      document.getElementById('immagine').src = image;
   }
  </script>
.
.
.
.
.
<td>[img]wbresize.aspx?f=opere/<%=(rsTestStampa.Fields.Item([/img]&amp;s=5" alt="<%=(rsTestStampa.Fields.Item("fotoOpera").Value)%>" id="immagine" /></td>

.
.
Stampa senza immagini
&amp;s=5'); return false;">Stampa con immagini

Da quel che ho constatato la funzione non gira se ci sono due immagini con lo stesso "ID".

E' possibile perciò fare in modo che la funzione agisca su tutte le immagini che come ID "immagine"

Grazie a tutti in anticipo.

[br1]

Assegnare lo stesso ID a diversi oggetti e' un errore concettuale (dato che l'ID deve essere univoco) e provoca gli errori che hai riscontrato.

Assegna eventualmente la stessa class ed agisci su di essa.

ciao

[artorius]

NO!!! Questo non è ne bello ne pratico: di ID in una pagina ce ne deve essere SOLO UNO!


La cosa migliore è applicare una classe non un id:

<td>[img]wbresize.aspx?f=opere/<%=(rsTestStampa.Fields.Item([/img]&s=5" alt="<%=(rsTestStampa.Fields.Item("fotoOpera").Val ue)%>" class="immagine" /></td>

a questo punto fai:

function changeImg(image) {
      var imgs  = document.getElementsByTagName('immagine');
      for(i = 0; i < imgs.length; i++){
         if(imgs[i].className == 'immagine') { imgs[i].src = image};
      }
}

[homezappa]

L'attributo id &egrave; l'identificativo univoco dell'oggetto.
Univoco significa che DEVE essere unico nella pagina!

Quindi devi ciclare tutte le immagini della pagina e su di esse applicare la funzione.

Per partire:

var immagini=document.getElementsByTagName("img");
var i;
    for(i=0;i<immagini.length;i++) {
        miaImmagine = immagini[i];
        miaImmagine.src = "immagini/null_trasp.gif";
    }

Il codice di cui sopra 'sbianca' tutte le immagini della pagina.
&Egrave; una partenza ...

HTH
Zappa

[homezappa]

Originariamente inviato da artorius
NO!!! Questo non è ne bello ne pratico: di ID in una pagina ce ne deve essere SOLO UNO!


La cosa migliore è applicare una classe non un id:

<td>[img]wbresize.aspx?f=opere/<%=(rsTestStampa.Fields.Item([/img]&s=5" alt="<%=(rsTestStampa.Fields.Item("fotoOpera").Val ue)%>" class="immagine" /></td>

a questo punto fai:

function changeImg(image) {
      var imgs  = document.getElementsByTagName('img');
      for(i = 0; i < imgs.length; i++){
         if(imgs[i].className == 'immagine') { imgs[i].src = image};
      }
}

Scusa, artorius, una piccola correzione (in rosso)

Zappa

[bibuz]

Originariamente inviato da br1
Assegnare lo stesso ID a diversi oggetti e' un errore concettuale (dato che l'ID deve essere univoco) e provoca gli errori che hai riscontrato.

Assegna eventualmente la stessa class ed agisci su di essa.

ciao

Ho provato con la classe ma il risultato è sempre lo stesso.

Agisce solo sul primo record.

[artorius]

Originariamente inviato da homezappa
Scusa, artorius, una piccola correzione (in rosso)

Zappa

Sissi, hai ragione è solo che prima avevo pensato di fargli usare getElementsBtClassName, ma poi mi son detto che avrebbe dovuto implementarsi una funzione per IE, quindi tanto valeva usare getElementByTagName, ma mi sono scordato di correggere.

[bibuz]

Grazie ragazzi per la soluzione va benissimo.

Ciao e buona giornata a entrambi.