Css
Articoli css
Effetto sfumatura sulle immagini con i css e javascript | Effetto sfumatura sulle immagini con i css e javascript |
|
|
| Scritto da Vincenzo | |
|
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:
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"
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">
per poi richiamare l'immagine in questo modo:
Ecco un esempio: |
| Pros. > |
|---|
Articoli correlati
- Introduzione ai fogli di stile (CSS)
- La compatibilità
- Inserimento dei fogli di stile (css) in un documento
- Elementi principali dei css
- I selettori (prima parte)
- Le proprietà del testo css (seconda parte)
- I selettori (seconda parte)
- Le proprietà del testo css (prima parte)
- Le pseudo-classi e gli pseudo-elementi
- Le unità di misura css
- La definizione dei colori css
- Le proprietà dello sfondo
- Il box model
- Effetto zoom su le immagini con i css
- Ereditarietà
- Il concetto di Cascade
- Le dimensioni (altezza e larghezza)
- I margini
- Il padding
Tag
principali cartelle contenente svariati modificato fanno tranne underline assoc stili impostato select supera tutta mantenere abbia influenza riconoscere utilizzato delete| Corso CSS e XHTML Web Design ed Accessibilità secondo il W3C.Corso con tutor ed attestato finale! |







