La presenza di menu grafici all'interno di pagine Web è una consuetudine consolidata. Utilizzando un numero basso di colori e dimensioni ridotte si ottengono immagini di peso irrisorio ma impatto estetico interessante. Le cose si complicano quando all'immagine si vuole aggiungere un effetto onmouseover. Con questo intendiamo il classico bottone che si anima al passaggio del mouse per poi tornare all'aspetto originale.
Lo script che presentiamo ha un effetto simile ma ottenuto con codice differente, molto semplice ed intuitivo.
Da un punto di vista tecnico lo script utilizza massicciamente le proprietà dei fogli di stile, e questo ne pregiudica il funzionamento su Netscape 4. Lo script funziona perfettamente su MsIe 4 o superiore e su Netscape 6.
L'esempio si compone di 4 file:
- 01.gif
- 02.gif
- 03.gif
- esempio.htm
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.
Questo è il file che simula il nostro documento HTML e sul quale dobbiamo inserire l'effetto onmouseover sulle tre immagini (01.gif, 02.gif e 03.gif).
Prima di tutto dobbiamo impostare il foglio di stile nell'intestazione del documento (<head>):
<style>
.borderimage { border:2px solid white;}
</style>
".borderimage" determina lo spessore in pixel (px) del bordo e il color (white) che deve avere quando non attivato dal passaggio del mouse. Provate a modificare il colore da white a black per verificarne il risultato.
Impostato il foglio di stile inseriamo, sempre tra i tag <head>, il seguente codice:
<script language="JavaScript1.2">
function borderit(which,color){
if (document.all||document.getElementById){
which.style.borderColor=color
}
}
</script>
Fatto questo dobbiamo inserire dei riferimento all'interno delle immagini sulle quali vogliamo creare l'effetto onmouseover. Consideriamo la prima immagine: 01.gif:
<img src="01.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'whitè)"/>
Si tratta di un normale tag HTML per l'inserimento di immagini al quale abbiamo aggiunto il richiamo alla classe "borderimage" (impostata nell'head del documento) e i due gestori di eventi:
onMouseover="borderit(this,'red')"
Quando il mouse passa sull'immagine viene attivata la funzione "borderit" che dà al bordo un colore rosso (red)
onMouseout="borderit(this,'whitè)"
Quando il mouse esce dall'area dell'immagine viene nuovamente attivata la funzione "borderit" che dà al bordo un colore bianco (white).
Modificando i colori si possono ottenere risultati differenti come nelle immagini 02.gif e 03.gif.
Ovviamente alle immagini si possono associare link secondo le regole classiche dell'HTML:
<a href="http://www.html.it"><img src="01.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'whitè)"/></a>
