pulsanti cambia immagine

**em-x** · 24-11-2006, 01:14

Salve a tutti
vorrei sapere come si fa ad aggiungere 2 pulsanti ad una pagina in cui è visualizzata un'immagine che permettono,rispettivamente,di visualizzare la successiva o la precedente,tipo 2 frecce una che fa andare ad un'immagine successiva e l'altra alla precedente
Grazie

**nuky** · 24-11-2006, 10:11

Prova così:

codice:

<html>
  <head>
    <title>Rotazione immagini</title>
    <script type="text/javascript">
      var idImmagine = "myImg"; //id del tag <img>
      var posizione = 0;        //Posizione nell'array dell'immagine iniziale, inserita nell'src del tag <img>
      
      //E' possibile inserire tante immagini quante ne servono, non è necessaria nessuna ulteriore modifica
      //E' possibile inserire percorsi relativi o assoluti
      var arrImmagini =
        new Array ("immagine1.jpg",
                   "/immagini/immagine2.jpg",
                   "immagine3.jpg",
                   "http://www.dominio.com/immagini/immagine4.png",
                   "immagine5.gif",
                   "immagine6.jpg"
                  );
      
      function Ruota(scarto) {
        posizione += scarto;
        //Viene controllato che non siano stati raggiunti i limiti dell'array
        if (posizione == -1)
          posizione = arrImmagini.length - 1; //porre a 0 se non si vuole ripartire dal fondo dell'array
        if (posizione >= arrImmagini.length)
          posizione = 0; //porre a "arrImmagini.length-1" se non si vuole ripartire dall'inizio dell'array

        alert(arrImmagini[posizione]);
        //Variazione di link e immagine del banner
        document.getElementById(idImmagine).src = arrImmagini[posizione];
      }
    </script>
    
    <style type="text/css">
      #myImg {display:block;}
    </style>
  </head>

  <body>
    [img]immagine1.jpg[/img]
    <input type="button" value="Precedente" onclick="Ruota(-1);" />
    <input type="button" value="Successiva" onclick="Ruota(1);" />
  </body>
</html>

**webdemo** · 24-11-2006, 11:36

carino, sarebbe interessante se leggesse le foto contenute in una dir

ciaux

**nuky** · 24-11-2006, 11:54

Originariamente inviato da webdemo
carino, sarebbe interessante se leggesse le foto contenute in una dir

ciaux

Lato client è un po' dura...
Gli elementi dell'array possono essere inseriti con un linguaggio lato server.
Oppure sarebbe fattibile lato client se le immagini avessero un formato standard rigoroso, tipo "img1", "img2", "img3"...
In questo caso si potrebbe gestire la presenza di un numero variabile di immagini.

**pierofix** · 24-11-2006, 12:16

Posso buttarvi lì una proposta? Provate a sfruttare appieno il markup. Mi riferisco a meta-informazioni come le seguenti:

codice:

<link rel="next" href="/articolo/3" />
<link rel="prev" href="/articolo/1" />

(Un elenco completo dei valori disponibili per l'attributo rel lo trovate qui: http://www.w3.org/TR/html4/types.html#type-links )

In questo modo lo script javascript potrebbe assegnare ai pulsanti creati nell'interfaccia i valori dei relativi href specificati nel markup.

Tutto ciò renderebbe quella collezione di documenti più accessibile, in quanto i link rel sono gestibili anche da barre di navigazione speciali contenute e attivabili in alcuni browser (Firefox, Opera e forse anche altri). Oltretutto, lo script diventerebbe più pulito e razionale.

Pensateci.

P.S. Come al solito, cercate di rendere intelligente il meccanismo. Se js fosse disabilitato o non presente sulla macchina dell'utente, i pulsanti diventerebbero superflui e addirittura di peso. Cercate quindi di crearli direttamente via javascript.

EDIT - Ok, sono un pirla!

Non avevo capito bene la situazione. Vabbè, il mio esperimento rimane valido, ma è fuori contesto.

**em-x** · 24-11-2006, 16:05

grazie Nuky
il metodo funziona ma vorrei eliminare quel fastidioso messaggio ke si apre ogni volta ke cambio immagine,potete aiutarmi?
I bottoni si possono anke cambiare in forma e posizione vero?

Le foto ke uso sono sempre numerate da 1 in poi (1.jpg ,2.jpg ecc..)
Se ci sono altri metodi aiutatemi pure grazie

**em-x** · 24-11-2006, 17:27

ok sono riuscito a mettere tutto in ordine ma ora ho un problema
Ai lati dell'immagine ci sono i pulsanti per cambiarla e tutto funziona per bene xò ho aggiunto una barra sotto ke cambia le foto in base al numero,cioè se clikki 20 va alla 20esima solo ke se poi clikki la freccia si vede la successiva a quella dell'ultima volta ke si era clikkato,come posso fare a fare riconoscere alla funzione l'immagine ke si è caricata per procedere con le frecce in ordine?

Il codeice ke ho usato è questo:

<html>
<head>
<title>Rotazione immagini</title>
<script type="text/javascript">

</script>

<style type="text/css">
#myImg {display:block;}
.Stile4 { font-family: "Arial Black", Arial, sans-serif, Helvetica;
font-size: 16;
}
a {
font-size: 16px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
a:visited {
color: #FFFFFF;
}
a:active {
color: #D7B262;
}
body {
background-color: #000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<table width="754" height="480" border="0" align="center">
<tr>
<td width="50" align="center">[img]fauno/pulS.jpg[/img]</td>
<td width="670" align="center">[img]fauno/11nov/1.jpg[/img]</td>
<td width="78" align="center">[img]fauno/pulD.jpg[/img]</td>
</tr>
</table>
<p align="center"><span class="Stile4">1 2 3 4 5 6 <a href="#" onClick=</span></p>
</body>
</html>

Grazie

Discussione: pulsanti cambia immagine

Strumenti discussione

Ricerca discussione

Visualizza

pulsanti cambia immagine

Permessi di invio