Guida minima al linguaggio HTML -Uso di iframe per una galleria di immagini

Galleria d'immagini con l'uso di iframe

In questo esempio basta cliccare su un'immagine piccola per ottenere la stessa, ingrandita, sempre nella stessa pagina.
Scusate se le immagini lasciano a desiderare: le abbiamo scelte per motivi di ...dimensione. Se volete, potete visitare la nostra galleria di frattali, dove le immagini sono sicuramente migliori!

Il codice di questo esempio non è particolarmente semplice: speriamo di renderlo comprensibile spiegandolo passo per passo.

Abbiamo preparato la pagina principale ed in questa abbiamo inserito, nella posizione preferita, un'immagine, attraverso la seguente riga di codice:
```
<img src="pae1.jpg" name="galle" height=206 width=298 align=left>
```
Come si vede, nella dichiarazione dell'immagine è presente l'attributo fondamentale name="galle". Se non si dà il nome all'immagine non sarà poi possibile far aprire una nuova immagine nello stesso punto cliccando sulle immagini dell'iframe.
Abbiamo poi inserito l'allineamento (a sinistra) e le dimensioni dell'immagine stessa. Se le dimensioni non vengono inserite la pagina si deformerà ad ogni caricamento di una nuova immagine.
Abbiamo preparato una seconda pagina, di nome paesaggi1.htm, che contiene le immagini piccole.
Per una migliore presentazione, abbiamo usato lo stesso colore di sfondo della pagina principale, e abbiamo usato una tabella di una sola riga con tante colonne quante sono le immagini. All'inizio, fra i tag <head> ed </head> abbiamo inserito il seguente codice JavaScript:
```
<script language="JavaScript">
function apri(conta) {
nuovo=new Array("pae1.jpg","pae2.jpg","pae3.jpg","pae4.jpg","pae5.jpg")
parent.galle.src=nuovo[conta]
}
</script>
```
Nell'array abbiamo scritti, uno dopo l'altro, i nomi con cui abbiamo salvato le cinque immagini (pae1.jpg, pae2.jpg...). E' ovviamente possibile salvare le immagini con il nome e l'estensione preferita. Tale array di immagini viene salvato in una variabile di nome nuovo
La riga parent.galle.src=nuovo[conta], fondamentale, fa sì che l'immagine prescelta sia caricata nel frame principale (parent) nella posizione in cui si trovava l'immagine iniziale. Questo grazie al fatto che avevamo dato all'immagine il nome "galle".
Ora dobbiamo fare in modo di attivare la funzione al click del mouse su una delle immagini.
Ecco il codice:
```
<table>
<tr>
<td><A href="javascript:apri(0)"><IMG src="pae1p.jpg" width=90></A>
<td><A href="javascript:apri(1)"><IMG src="pae2p.jpg" width=90></A>
<td><A href="javascript:apri(2)"><IMG src="pae3p.jpg" width=90></A>
<td><A href="javascript:apri(3)"><img src="pae4p.jpg" width=90></A>
<td><A href="javascript:apri(4)"><img src="pae5p.jpg" width=90></A>
</tr>
</table>
```
Le immagini piccole erano state salvate con i nomi pae1p.jpg, pae2p.jpg... per collegarle meglio mentalmente a quelle di dimensione maggiore. Cliccando, ad esempio, su pae1.jpg, viene attivata la funzione javascript apri(0), che apre la prima immagine memorizzata nell'array di nome nuovo.
Notiamo che per JavaScript la numerazione parte da 0!
Si può poi aggiungere l'attributo border=0 per evitare il bordo del collegamento intorno alle immagini. Chiaramente questa è solo una scelta estetica.
Ed eccoci finalmente all'ultimo passo: aprire la finestra principale, ed aggiungere il seguente codice:
```
<IFRAME name="ok" align=top src="paesaggi1.htm"
 width="280" height="102"  frameborder=0 marginwidth=2 marginheight=2>
</IFRAME>
```
Gli attributi possono essere scelti a piacere.

©2002 www.webfract.it