Non sei loggato | | 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 Novembre 2007 alle 14:24 Trackback URI

Scrivi un commento

Tags di formattazione:








Feed

infoPillole (by Wikipedia)

Ultimi commenti

  • ViZ: Sei un grande!
  • enzo: ORA puoi provare JAMP ottimo framework scritto da...
  • Federico: PHP & template engine comparison:...
  • Federico: PHP & template engine compared:...
  • Ionela: interessante! volevo segnalarvi una nuova...

Calendario

Maggio 2012
L M M G V S D
« Lug    
 123456
78910111213
14151617181920
21222324252627
28293031  

Archivio

Categorie

News casuali

Ultimi tutorials

Progetti

Alcuni miei lettori