Rollover link in css senza tremolio

Stampa E-mail

Uno tra gli effetti grafici più comuni che vengono realizzati con l'uso dei css è il rollover, che sfrutta le proprietà dei link. Il rollover può consistere in uno sfondo di solo colore (es.: #ccc o Grey), oppure in uno sfondo realizzato attraverso l'uso di immagini.

In quest'ultimo caso bisogna stare attenti alla tecnica che si utilizza, perchè, il caricamento dell'immagine associata all'evento hover, può provocare uno spiacevole effetto "vuoto".

Infatti se per il rollover su usano 2 immagini differenti, all'apertura della pagina è caricata la sola immagine di a:link (nuovo o visitato), mentre quella dell' a:hover è caricata solo al passaggio del mouse.
Su Internet Explorer 6 il fenomeno si accentua per un bug del browser e  si ripropone ogniqualvolta si apre la pagina.

Il problema può essere risolto in vari modi: con un classico rollover javascript o con una modifica al file .htaccess. Io uso semplicemente i css, attribuendo allo sfondo un unica immagine che, quando si attiva a:hover scorre dietro il link, cambiando lo sfondo.

Per capire meglio ho predisposto un esempio.

La tecnica è molto semplice, e consiste nell'assegnare un posizionamento negativo all'unica immagine di sfondo quando si attiva l'hover. Analizziamo il css:

Anzitutto abbiamo fissato gli stili per l'anchor. Qui abbiamo messo un'imagine di sfondo

a.roll {
background: url(bg_rollover.gif) no-repeat left;

Poi abbiamo fatto in modo da centrare il testo verticalmente, rendendo uguali l'altezza della linea di testo e del blocco.

line-height: 22px;
height: 22px;

Infine abbiamo lasciato un pò di spazio a sinistra per far apparire il quadratino dello sfondo come se fosse un indicatore di lista.

padding-left: 50px;
/*ecc*/
}

Ma la parte più importante viene dopo. Abbiamo sceltp un colore diverso per ogni link, ma soprattutto abbiamo modificato la posizione dell'immagine in a.roll:hover , facendola scivolare indietro.

a.roll:link { color: #731D1D; background-position: 0px 50%; }
a.roll:visited { color: Purple; }
a.roll:hover { color: #FFFFFF; background-position: -200px 50%; }

I due valori in background position-position si riferiscono all'allineamento, rispettivamente, orizzontale e verticale. Ponendo l'allineamento verticale al 50%, abbiamo centrato l'immagine. La posizione orizzontale invece va determinata in relazione alla larghezza del contenitore del link. Nel nostro caso l'abbiamo fissata a 200px (con il workaround per il box model).

Se avessimo usato 2 immagini distinte, esse avrebbero auto entrambe 200px di larghezza. Invece ne abbiamo usato una da 400px, il cui inzio è fissato a 0px per a:link e a:visited. Invece è a 200px per a:hover.

Ultimo aggiornamento ( venerdì 03 febbraio 2006 )

Home arrow Webdesign arrow Rollover link in css senza tremolio

 I Feed RSS di miniDesign

In evidenza
Il file htaccess
Tutorial mappa Google
Ultime notizie
Le più lette
Ricerca rapida