Cambio immagine con javascript.

[purno]

Vorrei qualcuno mi suggerisse il modo per consentire al visitatore di una pagina di cambiare l'immagine nella stessa - attraverso dei semplici links - senza cambiare pagina.

Si tratta sia di permettere la visione di tre o quattro immagini al visitatore sia di non creare troppe pagine al sottoscritto.

Grazie 1000.

[pierofix]

Come al solito il procedimento da seguire è questo:

1. realizzare la struttura XHTML, inserendo tutte le foto nel documento (essendo esse parte integrante del contenuto);
   
2. tramite CSS, creare delle classi per fare in modo di sovrapporre tutte le immagini (come in un mazzo di carte), lasciando la prima in cima;
   
3. scrivere un javascript che porti in primo piano la foto in questione, mediante pulsanti che saranno generati anch'essi da javascript (se javascript fosse disabilitato quei pulsanti sarebbero inutili, in quanto le foto apparirebbero tutte una di seguito all'altra).

Direi di procedere intanto con la costruzione della struttura di markup. Una cosa del genere potrebbe andarti bene?

<div id="cartoline">
   <ul>[*][img]foto1.jpg[/img][*][img]foto2.jpg[/img][*][img]foto3.jpg[/img]
      [/list]
</div>

[pierofix]

Preparazione del CSS.

Direi di iniziare innanzitutto con la creazione di una classe in grado di far sparire dallo schermo le immagini che non ci interessano, e di conseguenza una classe per farle apparire:

.invisibile
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}
.visibile
{
   position:static; top:0;
   width:auto; height:auto;
   overflow:auto;
}

[pierofix]

Cominciamo ad abbozzare il javascript.

Recuperiamo innanzitutto, tramite il DOM, i vari attori della commedia:

var cartoline = document.getElementById('cartoline')
var lista = cartoline.getElementsByTagName('ul').item(0)
var items = lista.getElementsByTagName('li')
var imgs = lista.getElementsByTagName('img')

Nascondiamo alla vista tutte le immagini (agiremo sugli elementi [*] che le contengono), tranne la prima:

for (var i = 0; i < items.length; i++)
{
   if ( i < 1 )
   {
      items.item(i).className = 'visibile'
   }
   else
   {
      items.item(i).className = 'invisibile'
   }
}

Ok fin qui?

[purno]

Si. Ti stò "seguendo" da questa pagina:

http://www.massaggiosiena.it/prova.htm

Ora sto usando immagini piccole (meno di 100px di altezza).

[pierofix]

Appena ho un attimo provo a scrivere il javascript completo e chiavi in mano. Poi, eventualmente, lo analizziamo se hai domande.

[purno]

[pierofix]

Preferisci solo due pulsanti 'avanti' e 'indietro', oppure un link per ogni immagine?

Per ora propongo metà della soluzione, ovvero la preparazione di tutte le funzioni per il mostra/nascondi. Manca ovviamente la generazione dei pulsanti e l'attribuzione di tali funzioni agli stessi:

window.onload = function()
{
   var cartoline = document.getElementById('cartoline')
   var lista = cartoline.getElementsByTagName('ul').item(0)
   var items = lista.getElementsByTagName('li')
   var imgs = lista.getElementsByTagName('img')

   var immagine_corrente = 0

   function mostra_nascondi(indice)
   {
      if ( indice < 0 )
      {
         indice = items.length - 1
         immagine_corrente = items.length - 1
      }
      if ( indice >= items.length )
      {
         indice = 0
         immagine_corrente = 0
      }
      for (var i = 0; i < items.length; i++)
      {
         if ( i == indice )
         {
            items.item(i).className = 'visibile'
         }
         else
         {
            items.item(i).className = 'invisibile'
         }
      }
   }

   mostra_nascondi(immagine_corrente)

   // Qui andrà il codice mancante.
}

[purno]

...un link per ogni immagine sarebbè l'ideale

[pierofix]

Oooccheii.

Edit: Siccome mi sono accorto che ci sono più strade percorribili per la seconda parte del codice, ti spiace se stasera ci penso con calma e domani ti do una soluzione ottimale? Ragionandoci un po' su si può risparmiare un sacco di codice inutile e ripetitivo.