L'inserimento di immagini all'interno di pagine Web è uno dei punti più delicati che uno sviluppatore si trova ad affrontare. Non è questa la sede per dare soluzioni alle problematiche legate alla compressione delle immagini ed ai vari formati grafici, per le quali rimandiamo alle pagine specifiche di HTML.it. In questo articolo cerchiamo di affrontare e risolvere, grazie agli strumenti tecnici messi a disposizione da Javascript, il problema della sistemazione di un grosso numero di immagini all'interno di un documento. Ci riferiamo a pagine che necesseriamente devono contenere un elevato numero di immagini, ma per le quali si vuole evitare l'utilizzo di lunghissimi scroller e relativa confusione.
L'articolo di questo mese si riferisce ad un visualizzatore di immagini collegato ad un menu a discesa, grazie al quale è possibile mostrare un'immagine per volta in base alle scelte dell'utente. Risultati simili si ottengono anche con Dynamic HTML, ma con maggior dispendio e complessità di codice HTML e di sintassi script.
L'esempio si compone di 4 file:
- esempio.htm
- immagine01.jpg
- immagine02.jpg<
- immagine03.jpg
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il file da visualizzare con il tuo browser è "esempio.htm"
Il file "esempio.htm" simula un documento all'interno del quale si intende inserire il nostro visualizzatore di immagini. Come solitamente accade con Javascript si deve agire su due punti distinti del codice fonte del documento; e cioè tra i tag <body> e tra i tag <head>. Cominciamo con questi ultimi inserendo il seguente codice tra <head>:
<script language="javascript">
<!--
function showimage()
{
if (!document.images)
return
document.images.pictures.src=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
Questo codice non va modificato in nessun punto, anche se si dovessero inserire altre immagini oltre alle 3 dell'esempio. Viene impostata la funzione "showimage" che richiameremo successivamente.
A questo punto dobbiamo aggiungere altro codice all'interno del documento, tra i tag <body>. Si tratta di codice che richiama la funzione "showimage" impostata in precedenza e il menu contenente le altre immagini.
Il menu viene creato grazie alle proprietà dei normali form HTML, ed in particolare con i campi <option>. Si tratta quindi di impostare un modulo con con la seguente struttura:
<form name="mygallery">
<select name="picture" size="1" onChange="showimage()">
<option selected value="immagine01.jpg">Prima</option>
<option value="immagine02.jpg">Seconda</option>
<option value="immagine03.jpg">Terza</option>
</select>
</form>
È fondamentale inserire il riferimento:
<select name="picture" size="1" onChange="showimage()">
che richiama la funzione "showimage" ogni volta che si cambia voce di menu.
Successivamente si impostano le tre immagini del nostro esempio. Per inserirne altre, è sufficiente aggiungere ulteriori campi <Option> con il nome ed il riferimento alle immagini. Abbiamo usato immagini con estensione JPG, ma è indifferente servirsi di altri formati riconosciuti dai browser.
Per ultimo aggiungiamo il riferimento all'immagine che dà la grandezza e la posizione al visualizzatore vero e proprio:
<img src="immagine01.jpg" name="pictures" width=150 height=100 border="0" alt="L'immagine appare qui">
È fondamentale la riga name="pictures" all'interno del codice. Il testo alternato rimane fisso per tutte le immagini, per cui è buona regola dargli un taglio generico.
"immagine01.jpg" è la foto che appare di default all'apertura del documento, ed è anche compresa nel menu creato in precedenza, ma questo non è obbligatorio, nel senso che al suo posto potremmo sostituire un'immagine non presente nel menu, visualizzata solo all'apertura della pagina prima che si realizzi qualsiasi altro evento.
