Lo script che presentiamo permette, utilizzando javascript e fogli di stile, di
impostare un effetto trasparenza sulle immagini. Effetto che scompare con
l'evento onMouseover.
Il codice è decisamente semplice da impostare ed è compatibile con
tutti i browser tranne Navigator, su cui non verrà restituito nessun errore
ma non verrà visualizzato l'effetto.
Il codice javascript va inserito tra i tags <head> della pagina:
<!-- INIZIO CODICE -->
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
<!-- FINE CODICE -->
Nello script non è necessaria nessuna modifica. Ciò che invece
si dovrà personalizzare è il tag img delle immagini su cui applicare l'effetto.
Impostiamo una semplice immagine:
|
<img src="immagine.gif" width="100" height="100" border="0">
|
Basterà inserire la riga seguente, all'interno del tag <img src...>, per applicare
l'effetto all'immagine:
|
style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"
|
Ecco quindi come sarà il risultato:
|
<img src="immagine.gif" width="100" height="100" border="0" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">
|
Ovviamente non ci sono limiti al numero di immagini a cui applicare il fade.
Immagini con effetto fade
