Tra gli utilizzi meglio riusciti di Javascript, la gestione di immagini associate ad eventi del mouse ricopre notevole importanza. Con questo intendiamo il passaggio del mouse su un'area di link utilizzata soprattutto nella creazione di menu.
L'esempio di questa settimana riprende l'argomento delle immagini visualizzate in modo dinamico, attraverso uno script molto semplice ed intuitivo.
Il file si compone di 5 file:
- esempio.htm
- 01.gif
- 02.gif
- 03.gif
- 04.gif
Le immagini *devono* necessariamente avere le stesse dimensioni sia in larghezza che in altezza. Puo', invece, variare il formato grafico.
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.
esempio.htm
La sintassi dell'esempio va parzialmente inserita tra i tag <head> ed in parte nel corpo del documento.
Nell'intestazione del documento va inserita la seguente sintassi:
<script type="text/javascript" language="javascript">
<!--
var bufferImage = new Array();
function Buffer(filename) {
var i = bufferImage.length;
bufferImage[i] = new Image();
bufferImage[i].src = filename;
}
function showImage(filename) {
document.images[Image_Name].src = filename;
}
Image_Name = "SHOWPAD";
Buffer("01.gif");
Buffer("02.gif");
Buffer("03.gif");
Buffer("04.gif");
//-->
</script>
Il codice imposta due funzioni: buffer e Showimage.
Le immagini dell'esempio sono riportate nell'ultima parte del codice. Importante, perchè lo script funzioni, il nome "SHOWPAD" assegnato alle immagini.
All'interno del documento va inserito, prima di tutto, il codice che richiama l'immagine di default, cioè visualizzata all'apertura di pagina:
<img src="04.gif" name="showpad" width=150 height=110/>
L'immagine "04.gif", dunque, è quella visualizzata all'apertura di pagina. Ha una grandezza di 150x110 pixel che deve necessariamente essere uguale a quella delle altre immagini. Se le immagini fossero di dimensioni differenti verrebbero deformate.
Il punto in cui viene posizionata l'immagine di default è anche quello in cui verranno visualizzate le immagini successive.
Impostata l'immagine di default, creiamo i link ad ognuno dei quali è associata un'altra immagine.
<a href="https://www.html.it/mailing/jscript.htm"
onMouseOver="showImage('04.gif')">Un Javascript a settimana</a><br />
<a href="https://www.html.it/"
onMouseOver="showImage('01.gif')">HTML.it</a> |
<a href="http://www.tuttogratis.com"
onMouseOver="showImage('02.gif')">Tuttogratis</a> |
<a href="http://www.hwupgrade.it"
onMouseOver="showImage('03.gif')">Hardware Upgrade</a>
Ad ogni link va associato un gestore di eventi onMouseOver che richiama la funzione ShowImage e l'immagine corrispondente. L'immagine richiamata è diversa per ogni link, per cui si avrà:
04.gif per il primo link
01.gif per il secondo link
02.gif per il terzo link
03.gif per il quarto link
Il primo link, in particolare, altro non è che un richiamo dell'immagine di default vista in precedenza.
Il gestore di eventi onMouseOver prevede che la funzione "ShowImage" venga richiamata quando il puntatore del mouse passa sul link.
onMouseOver puo' sostituirsi con un altro gestore di eventi: onmouseout.
onmouseout viene attivato quando il puntatore del mouse abbandona l'area di link. Ha un funzionamento opposto a onmouseover, in quanto non è importante che il puntatore entri nell'area di link, ma che ne esca. Solo in quel momento, infatti, il gestore di eventi verrà attivato.
Ai link testuali dell'esempio possono essere sostituite immagini in qualsiasi formato grafico, anche GIF animate.
