Non sei loggato | Registrati | Login

3 Tecniche diverse per il RollOver in CSS Aggiungi

News / Codice

Benvenuto! Se sei un nuovo visitatore ti consiglio di iscriverti al mio Feed RSS in modo da essere sempre aggiornato riguardo l'uscita di nuovi articoli oppure sbirciare tra i tutorials ed i progetti.
Per avere un'idea del best-content presente in questo blog puoi leggere il post intitolato "Ed ora è il momento di rilanciare alcune iniziative! (1a parte e 2a parte)".
Buona navigazione e grazie per la visita!

Colin Cochrane ha scritto un ottimo articolo che spiega in maniera piuttosto semplice 3 tecniche per implementare il RollOver in CSS.

CSS Preloading

  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

  1. #rollover{background:url("/images/2.gif");display:block;height:50px;width:50px;}
  2. #rollover:hover img{visibility:hidden;}

Il HTML è il seguente:

  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

  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

Calendario

Ottobre 2008
L M M G V S D
« Set    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Archivio

Categorie

News casuali

Ultimi tutorials

Progetti

Alcuni miei lettori

Have a break