 Bordo sulle immagini al passaggio del mouse
Postato da webmaster il Friday, 31 October @ 08:00:00 CET
Contributed by webmaster
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 e 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 seguente 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.
Prima di tutto va impostato 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.
|
<img src="immagine.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'white')"/>
|
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,'white')"
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.
Ovviamente alle immagini si possono associare link secondo le regole classiche
dell'html:
|
<a href="http://www.altervista.org"><img src="nomefile.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'white')"/></a>
|
|
|
| |
 |
Valutazione |
 |
|
Punteggio Medio: 5
Voti: 2
|
|
|
 |
|
