Non sei loggato | Register | Login

3 Tecniche diverse per il RollOver in CSS Aggiungi

News / Codice

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
  1. #rollover{background:url("/images/1.gif");}
  2. #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
  1. #rollover{background:url("/images/2.gif");display:block;height:50px;width:50px;}
  2. #rollover:hover img{visibility:hidden;}

Il HTML è il seguente:

Visualizza il codice HTML
  1. <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
  1. #rollover{background:url("/images/multi.gif") bottom;display:block;height:20px;width:100px;}
  2. #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.

Daniele Simonin 4 November 2007 alle 14:24 Trackback URI

Scrivi un commento

Tags di formattazione:








Feed

infoPillole (by Wikipedia)

Ultimi commenti

Calendario

March 2010
M T W T F S S
« Feb    
1234567
891011121314
15161718192021
22232425262728
293031  

Archivio

Categorie

News casuali

Ultimi tutorials

Progetti

Alcuni miei lettori

Have a break