Lo script che presentiamo permette, utilizzando javascript e fogli di stile, di impostare un effetto trasparenza su delle immagini.
Il codice, decisamente semplice da impostare, è compatibile con Explorer 5.x e Netscape 6.x mentre con Navigator non sarà possibile visualizzare l'effetto anche se non verranno restituiti errori.
- esempio.htm
- 01.gif
- 02.gif
- 03.gif
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 codice javascript va inserito tra i tag <head> della pagina:
<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>
In questo script non è necessaria nessuna modifica. Ciò che invece dovremo 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.
