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

  • byman: Ho trovato molto utile questa raccolta di...
  • Flavio: bella questa!
  • Beta: Thank you.Beautiful CSS form“
  • Daniele Simonin: Per guadagnare molti usano questa...
  • Luca: Per guadagnare bisogna lavorare, io ho raccolto un...

Calendario

September 2010
M T W T F S S
« Aug    
 12345
6789101112
13141516171819
20212223242526
27282930  

Archivio

Categorie

News casuali

Ultimi tutorials

Progetti

Alcuni miei lettori