Immagini con effetto fade

Lo script che presentiamo permette, utilizzando javascript e fogli di stile, di impostare un effetto trasparenza su delle immagini. Il […]

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.