| | Opacità immagine con immagine di overlay, onmouseover | |
| |
 | | |
| Vale2 |
| | Ciao, effetto opacità immagine con onmouseover e immagine di overlay visibile solo quando viene attivato l'effetto (il mouse sopra l'imagine). CODICE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Immagine con opacità variabile con OnMouseOver</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> div#_div{width: 100%; height: 100%;} div#_div1{width: 438px;height:700px;background:url(amore00.gif) no-repeat 38% 80%} /* posizione immagine overlay 50% 50% al centro Left e top */ .immagine{filter:alpha(opacity=50); /* IE/Win */ opacity: 0.5; /* Safari 1.2, più recente Firefox e Mozilla, CSS3 */ -moz-opacity:0.5; /* Più vecchio di Firefox 0.9 */ -khtml-opacity: 0.5; /* Safari 1.x (pre WebKit!) */ KHTMLOpacity:0.5; /* Safari <1.2, Konqueror */ MozOpacity:0.5; /* Più vecchio di Mozilla e Firefox */ } .immagine1{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; -khtml-opacity:1; KHTMLOpacity:1; MozOpacity:1; } </style> </head> <body bgcolor="#FFFFFF"> <div align="center"> <div id="_div"> <div id="_div1"> <img class="immagine1" src="tumblr_le1pb0NSHU1qzeuet.jpg" alt="Michelle Hunzicher" title="Michelle Hunzicher" onmouseover="this.className='immagine'" onmouseout="this.className='immagine1'" style="cursor:pointer"> </div> <p><font face="Verdana" size="2">Passa con il Mouse sopra L'immagine</font></p> </div> </div> </body> </html> Compatibile con tutti i Browser. Il CSS è commentato. esemlio on-line: http://vale2.brinkster.net/esempi/michelle_hunzicher/Valeria. | | | |
| |
|
| 1 replies since 3/5/2012, 17:44 176 views |
| |
| | |
