creazione di una photogallery

[lule]

Salve dovrei sostenere l'esame di prigrammazione web e il prof richiede la creazione di una photogallery con html, css e java nella quale cliccando sulle miniature si possa visualizzare l'immagine grande. Purtroppo non riesco a far funzionare il codice
questo è li script
<script language="JavaScript" type="text/javascript">
<!--
var miniatura=new Array();
miniatura[0]=new Image();
miniatura[1]=new Image();
miniatura[2]=new Image();
miniatura[3]=new Image();
miniatura[0].src="Flower1%20miniatura.jpg";
miniatura[1].src="Flower3%20miniatura.jpg";
miniatura[2].src="Flower4%20miniatura.jpg";
miniatura[3].src="Nature3%20miniatura.jpg";

var principale=new Array();
principale[0]=new Image();
principale[1]=new Image();
principale[2]=new Image();
principale[3]=new Image();
principale[0].src="Flower1%20principale.jpg";
principale[1].src="Flower3%20principale.jpg";
principale[2].src="Flower4%20principale.jpg";
principale[3].src="Nature3%20principale.jpg";

function change_img (number)
{ document.principale.src=immagini(number).src;
}



//-->
</script>

Vorrei sapere dove sbaglio, come correggerlo e come associarlo all'html.
questo è l'html
ul class="Photogallery">[*][img]Photogallery_files/Flower1%2520miniatura.jpg[/img][*][img]Photogallery_files/Flower3%2520miniatura.jpg[/img][*][img]Photogallery_files/Flower4%2520miniatura.jpg[/img]
<li id="ultimo">[img]Photogallery_files/Nature3%2520miniatura.jpg[/img]
Grazie

[artorius]

Ma il codice lo hai fatto tu?

[lule]

si...vorrei ke venisse corretto perke' non mi funziona.Premetto che non ho molta conoscenza di javascript, ma sono alle prime armi. Ti ringrazio se puoi aiutarmi.

[artorius]

mmm secondo me il problema è che prima di scrivere codice bisognerebbe avere una conoscenza dello strumento. Voglio dire, dai in mano un bisturi ad uno che non sa operare? (lo so, è esagerata come metafora, ma neanche più di tanto...)

Sinceramente, non la farei in questo modo, ma mantenedo una lista come nella tua struttura (e usando i BBcode )

<ul>[*]
      <a href="imgs/Flower1%20principale.jpg" class="Tooltip">
         [img]imgs/Flower1%20miniatura.jpg[/img]
      </a>
   [*]
      <a href="imgs/Flower2%20principale.jpg" class="Tooltip">
         [img]imgs/Flower2%20miniatura.jpg[/img]
      </a>
   [*]
      <a href="imgs/Flower3%20principale.jpg" class="Tooltip">
         [img]imgs/Flower3%20miniatura.jpg[/img]
      </a>
   [*]
      <a href="imgs/Flower4%20principale.jpg" class="Tooltip">
         [img]imgs/Flower4%20miniatura.jpg[/img]
      </a>
   [*]
      <a href="imgs/Flower1%20principale.jpg" class="Tooltip">
         [img]imgs/Flower1%20miniatura.jpg[/img]
      </a>
   [/list]

[img]imgs/empty.jpg[/img]

Come path ho messo una sotto directory imgs/ dove mettere le immagini (così resta un pelo più ordinato)

Ora, noterai che ho messo una class="Tooltip" ai link che useranno il tooltip, l'ho fatto per identificare quali link attivano il tooltip, alcuni script usano il rel, ma personalmente preferisco mettere il class, così l'ho già se devi stilare i link con CSS.

per il JS

window.onload = function(){
   var links = document.getElementsByTagName("a");
   for(i = 0; i < links.length; i++)
   {
      if(links[i].className == 'Tooltip')
      {
           links[i].onclick = changeImg;
      }
   }
}

function changeImg(e){
   var src = this.href; 
   document.getElementById("MyIMG").src = src;

   var evt = window.event || e;
   if (evt.stopPropagation) {
      evt.stopPropagation();
   } else {
      evt.cancelBubble = true;
   } 
   return false;
}

Ora prima di capire il codice che ho scritto devi, per prima cosa, capire gli eventi, per quello ti conviene andare a leggere un tutorial o simile.

Dopo che sai che sono gli eventi:

nella prima istruzione associo una funzione all'evento onload della pagina.

Successivamente, ottengo tutti i tag <a> della pagina con:

var links = document.getElementsByTagName("a");

e per ognuno di essi controllo se hanno il className, in JS il class="" si legge o si scrive con className, uguale a "Tooltip".

In caso positivo, ho sono su di un elemento del mio tooltip, allora, gli associo all'evento onclick la funzione changeImg

Questa funzione, che definisco sotto, non fa altro che leggere l'href del link (che ho impostato all'immagine grande) e sostituirlo al src dell'immagine con id="MyIMG".

Poi, e questa è la parte più importante, blocca la funzionalità base dell'evento onclick (che nel caso di un link è aprire la pagina corrispondente all'href) tramite le ultime righe del codice:

   var evt = window.event || e;
   if (evt.stopPropagation) {
      evt.stopPropagation();
   } else {
      evt.cancelBubble = true;
   }

Nota che "e" viene passato come argomento della funzione SOLO su Firefox, mentre con IE, Safari e Opera, l'evento è in window.event, quindi è questo il motivo di:

   var evt = window.event || e;

Per essere sicuro di avere l'oggetto event dell'evento corrente.

Allo stesso modo event.stopPropagation viene usato in tutti i browser tranne IE, per il quale si usa event.cancelBubble, per bloccare la funzionalità base dell'evento.

Se hai altre domande chiedi.

[lule]

grazie mille....purtroppo sono ancora all'inizio dei miei studi....spero di migliorare...grazie grazie grazie ancora