Se volete utilizzare nel vostro sito immagini con effetto opaco anche detto “effetto Off”, non c’è bisogno di utilizzare 2 immagini differenti.
Potete risparmiare moltissimo tempo grazie al codice Css. Una volta che passate con il mouse sopra l’immagine opaca “si accende” e otterrete l’effetto desiderato. Per applicare questo effetto alle vostre immagini seguite i semplici punti che seguono:
Potete risparmiare moltissimo tempo grazie al codice Css. Una volta che passate con il mouse sopra l’immagine opaca “si accende” e otterrete l’effetto desiderato. Per applicare questo effetto alle vostre immagini seguite i semplici punti che seguono:
Codice da inserire nel vostro foglio di stile css
a.linkopaco img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.linkopaco img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.linkopaco:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Codice html dell’esempio qui sopra
#1sergio drago
Il problema è che questo sistema non passa la validazione css.
Ciao.
#2Shor
a non ci avevo provato a validarlo, comunque se non si ha un sito perfetto va bene 🙂
altrimenti il vecchio metodo delle 2 immagini va sempre bene pure quello
#3Mega69
Ciao Shor, purtroppo questo metodo non va bene in IE per un conflitto di filtri.
Clicca su Mega69 per maggiori dettagli.
#4Shor
grazie mega69 ma questo metodo va bene anche per IE, non va bene se inserisci erroneamente immagini con sfondo trasparenti PNG, ma quelle a prescindere il motore il di IE non le digerisce.
Ho cambiato il formato in Jpg e l’effetto si vede perfetto anche su IE.
Comunque grazie per avermi avvertito altrimenti non me ne sarei accorto che avevo messo una PNG.
Grazie 🙂
#5Mega69
Prego 🙂
Comunque per chi non lo sapesse c’è un trucchetto per inserire le png anche su IE6 ( il link è su Mega69 );
quello che volevo evidenziare è proprio il fatto che tale trucchetto non funziona se vogliamo fare questo tipo di rollover…
#6Mario
Dà problemi anche grazie agli ActiveX in IE 6. Dalla release di Dreamweaver 8.02 in poi dicono di aver creato un tool per fare l’hack del problema tuttavia sebbene funzioni per gli object Flash, a me non elimina la barra per l’opacità via css.
#7Alessandro
Ciao ragazzi, io ho provato tutto e funziona tutto, ma come faccio a mettere dentro ad un box opaco una immagine che siveda bene e non con lo sfondo del box!?
#8Fabri
Bellissimoooo 🙂