3 Tecniche diverse per il RollOver in CSS
Colin Cochrane ha scritto un ottimo articolo che spiega in maniera piuttosto semplice 3 tecniche per implementare il RollOver in CSS.
CSS Preloading
Visualizza il codice CSS
#rollover{background:url(“/images/1.gif”);}
#rollover:hover{background:url(“/images/2.gif”);}
Risulta essere la tecnica più naturale per implementare il RollOver, ma il ritardo del caricamento della seconda immagine è spesso un problema.
Image Visibility Swap
Visualizza il codice CSS
#rollover{background:url(“/images/2.gif”);display:block;height:50px;width:50px;}
#rollover:hover img{visibility:hidden;}
Il HTML è il seguente:
Visualizza il codice HTML
<a id=“rollover” href=“http://www.domain.com”><img src=“/images/1.gif” alt=“My Rollover’s Inactive Image” /></a>
Non si fa altro che mascherare un’immagine per visualizzarne un’altra.
Multistate Image
Visualizza il codice CSS
#rollover{background:url(“/images/multi.gif”) bottom;display:block;height:20px;width:100px;}
#rollover:hover{background-position:top;}
Non è altro che un utilizzo degli Sprites CSS.
Come avete notato sono stato molto breve nello spiegare le 3 tecniche, perchè? C’è già tutto scritto nell’articolo citato sopra Chi ha già smanettato con i CSS leggendo queste poche righe di codice capirà al volo la logica che ci sta dietro.
Share it:
Queste icone linkano i siti di social bookmarking sui quali i lettori possono […]
Related:
- PNG in IE6 con DD_belatedPNG
- 9 tecniche per il CSS Image Replacement
- Version targetting per Internet Explorer 8
- Il codice di Rocca di Mezzo « Musica Medievale
- Confrontare le connessioni ADSL in Italia | Matteo Dini
- Confrontare le connessioni ADSL in Italia | Il Bloggatore
- ISP - Settaggi Alice 7 Mega - P2P Forum Italia
Testi delle canzoni. Video musicali gratis.
