Cambio immagine con javascript.

[purno]

Prenditi tutto il tempo che vuoi e sprattutto grazie 1000 per l'aiuto prezioso!

[pierofix]

Dunque, sono arrivato ad una soluzione finale, anche se ho bisogno di un vostro aiuto alla fine dello script javascript (poi vi spiego perchè). Andiamo con ordine. Queste sono le varie porzioni di codice (vanno praticamente a sostiuire quelle scritte fin ora).

Struttura XHTML. Da notare come i nomi delle foto siano inseriti all'interno dell'attributo title, il cui valore darà il testo al pulsante corrispondente alla foto.

<div id="diapositive">
   <ul>[*]
         [img]foto_1.jpg[/img]
      [*]
         [img]foto_2.jpg[/img]
      [*]
         [img]foto_3.jpg[/img]
      [/list]
</div>

Codice CSS.

.invisibile
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}
.visibile
{
   position:static; top:0;
   width:auto; height:auto;
   overflow:auto;
}
		
#pulsantiera a
{
   color:blue;
   text-decoration:underline;
   cursor:pointer;
}

Codice Javascript.

window.onload = function()
{
   // PARTE 1/2: PREPARAZIONE DELLE FUNZIONI
   
      var diapositive = document.getElementById('diapositive')
      var lista = diapositive.getElementsByTagName('ul').item(0)
      var items = lista.getElementsByTagName('li')
      var imgs = lista.getElementsByTagName('img')
      
      function mostra_nascondi(indice)
      {
         for (var i = 0; i < items.length; i++)
         {
            if ( i == indice )
            {
               items.item(i).className = 'visibile'
            }
            else
            {
               items.item(i).className = 'invisibile'
            }
         }
      }
      mostra_nascondi(0)
      
      
   // PARTE 2/2: CREAZIONE DELLA PULSANTIERA E ATTRIBUZIONE FUNZIONI
   
      var pulsantiera = document.createElement('ul')
         pulsantiera.setAttribute('id', 'pulsantiera')
      
      var pulsantiera_pulsanti_testi = new Array()
      for (var i = 0; i < imgs.length; i++)
      {
         var title = imgs.item(i).getAttribute('title')
         var testo = document.createTextNode(title)
         pulsantiera_pulsanti_testi.push(testo)               
      }
      
      var pulsantiera_items = new Array()
      var pulsantiera_pulsanti = new Array()
      for (var i = 0; i < imgs.length; i++)
      {
         var list_item = document.createElement('li')
         var pulsante = document.createElement('a')
         pulsantiera_items.push(list_item)
         pulsantiera_pulsanti.push(pulsante)
      }
      
      for (var i = 0; i < pulsantiera_pulsanti.length; i++)
      {
         pulsantiera_pulsanti[i].appendChild(pulsantiera_pulsanti_testi[i])
         pulsantiera_items[i].appendChild(pulsantiera_pulsanti[i])
         pulsantiera.appendChild(pulsantiera_items[i])
      }
      diapositive.appendChild(pulsantiera)
      
      for (var i = 0; i < pulsantiera_pulsanti.length; i++)
      {
         pulsantiera_pulsanti[i].onclick = function()
         {
            mostra_nascondi(i)
         }
      }
}

La parte evidenziata in grassetto e rosso è quella che mi dà problemi. Praticamente il meccanismo non funziona perchè non riesco a valorizzare la variabile 'i' all'altezza di 'mostra_nascondi(i)'.

E' un problema di visibilità di variabile che non riesco a risolvere: come sistemare? E' l'unica cosa da mettere a posto per far andare a posto l'intero meccanismo.

[Xinod]

...
      for (var i = 0; i < pulsantiera_pulsanti.length; i++)
      {
         pulsantiera_pulsanti[i].appendChild(pulsantiera_pulsanti_testi[i])
         pulsantiera_items[i].appendChild(pulsantiera_pulsanti[i])
         pulsantiera.appendChild(pulsantiera_items[i])

	var pp=pulsantiera_pulsanti[i]
        keepRef(pp,i)
	pp.onclick=pp.mClick
      }
      diapositive.appendChild(pulsantiera)

      function keepRef(obj,i){
        obj.mClick=function(){mostra_nascondi(i)}
      }

cosi' resta in scope

[pierofix]

Faccio un po' di fatica a leggere bene la tua soluzione. Se hai due secondi per spiegarmela mi faresti un gran piacere. Oltretutto non capisco da dove derivi il problema di visibilità nella mia soluzione. Intanto grazie mille.

[pierofix]

Il javascript funzionante e adattato risulta pertanto il seguente:

window.onload = function()
{
   // PARTE 1/2: PREPARAZIONE DELLE FUNZIONI
   
      var diapositive = document.getElementById('diapositive')
      var lista = diapositive.getElementsByTagName('ul').item(0)
      var items = lista.getElementsByTagName('li')
      var imgs = lista.getElementsByTagName('img')
      
      function mostra_nascondi(indice)
      {
         for (var i = 0; i < items.length; i++)
         {
            if ( i == indice )
            {
               items.item(i).className = 'visibile'
            }
            else
            {
               items.item(i).className = 'invisibile'
            }
         }
      }
      mostra_nascondi(0)
      
      
   // PARTE 2/2: CREAZIONE DELLA PULSANTIERA E ATTRIBUZIONE FUNZIONI
   
      var pulsantiera = document.createElement('ul')
         pulsantiera.setAttribute('id', 'pulsantiera')
      
      var pulsantiera_pulsanti_testi = new Array()
      for (var i = 0; i < imgs.length; i++)
      {
         var title = imgs.item(i).getAttribute('title')
         var testo = document.createTextNode(title)
         pulsantiera_pulsanti_testi.push(testo)               
      }
      
      var pulsantiera_items = new Array()
      var pulsantiera_pulsanti = new Array()
      for (var i = 0; i < imgs.length; i++)
      {
         var list_item = document.createElement('li')
         var pulsante = document.createElement('a')
         pulsantiera_items.push(list_item)
         pulsantiera_pulsanti.push(pulsante)
      }
      
      function applica_mostranascondi(pulsante, numero_immagine)
      {
         pulsante.azione = function()
         {
            mostra_nascondi(numero_immagine)
         }
      }
      for (var i = 0; i < pulsantiera_pulsanti.length; i++)
      {
         pulsantiera_pulsanti[i].appendChild(pulsantiera_pulsanti_testi[i])
         pulsantiera_items[i].appendChild(pulsantiera_pulsanti[i])
         pulsantiera.appendChild(pulsantiera_items[i])

         applica_mostranascondi(pulsantiera_pulsanti[i], i)
         pulsantiera_pulsanti[i].onclick = pulsantiera_pulsanti[i].azione
      }
      diapositive.appendChild(pulsantiera)
}

Grazie mille a Xinod per la soluzione.

[purno]

Quando hai detto che ti serviva un pò di tempo non pensavo che parlavi di alcune ore semplicemente!

Il tuo lavoro funziona a meraviglia (avrò da chiederti solo dei consigli più tardi )!

Grazie 1000.

[purno]

Segnalo un inconveniente:

in un Internet Point - con connessione poco fulminea - ho notato che prima che compaia il "risultato finale" - ovvero l'immagine1 con i links per tutte le altre - si devono caricare tutte le immagini che compongono la galleria fotografica.

In altre parole: si vede il caricamento di immagini in successione... che poi scompaiono per lasciare il posto ad una sola immagine e ad un menu di navigazione.

Se non è chiaro un esempio in questa pagina dove ho messo sia immagini leggere (simulare connessione veloce) sia immagini pesanti (connssione lenta).

C'è rimedio all'inconveniente?

Grazie 1000.

[pierofix]

Diciamo che è il prezzo da pagare per fare le cose bene. A livello concettuale, lo scorrimento delle immagini via javascript è un di più, una facilitazione, che non deve però inficiare la qualità della base.

Escludendo quindi ogni contaminazione al markup, forse potresti risolvere con qualche tecnica di preload immagini, anche se a mio avviso è tempo buttato via.

Vedi tu. Tieni solo a mente il fatto che qualunque script tu voglia implementare non vada a destabilizzare la logica del meccanismo.

[purno]

Userò il tuo lavoro con immagini leggere.

Grazie 1000.