Effetto sfumatura sulle immagini con i css e javascript

Con con l’uso dei css è possibile ottenere svariati effetti, molti dei quali a grande impatto visivo, in quest’articolo impareremo a far opacizzare un’immagine al passaggio del mouse utilizzando css e javascript.

Cominciamo con la dichiarazione css:

<style type="text/css">
    img.opaco{
        opacity:0.5;
        filter: alpha(opacity=50);
    }
</style>

Viene definita la classe "opaco" che, se applicata ad un’ immagine, farà in modo di renderla parzialmente opaca, ci sono 2 righe di codice, la prima (opacity:0.5) viene utilizzata da firefox, mentre la seconda sintassi {filter:alpha(opacity=50)} è utilizzata da internet explorer.

Ora che abbiamo capito come opacizzare l’immagine dobbiamo fare in modo di applicare questa proprietà solo al passaggio del mouse; per questo ci viene in aiuto il nostro amico javascript.

<img src="immagine.gif"  class="opaco"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Il codice è molto semplice, dopo aver inserito l’immagine nella pagina ed aver specificato che appartiene alla classe "opaco" vengono utilizzate le proprieta onmouseover (ossia, quando il mouse viene posizionato sopra all’elemento) ed onmouseout (quando il puntatore del mouse viene posizionato altrove ma non sopra l’immagine), per cambiare lo stile, esaminiamole in dettaglio:

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

Anche quì ci sono 2 tipi di codice, ossia,  this.style.opacity=1 ed this.filters.alpha.opacity=100, sicuramente avrete capito che il primo è per firefox, mentre il secondo è per IE, la stessa cosa vale per il codice utilizzato per la proprietà onmouseout.

L’immagine verrà caricata e verrà utilizzato di default lo stile "opaco"; solo nel caso in cui il puntatore del mouse andrà a posizionarsi sull’immagine, verranno utilizzate le proprietà onMouseOver e onMouseOut.

Se non volete utilizzare javascript potete sostituire il codice con il seguente, racciudendo l’immagine in un link:

<style type="text/css">
    a.opaco img{
        opacity:0.5;
        filter:alpha(opacity=50);
    }
    a.opaco :hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
    }
</style> 

per poi richiamare l'immagine in questo modo:

<a href="#" class="opaco"><img src="immagine.gif" alt="Img" /></a>

Ecco un esempio:

Popularity: 8% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback