WalterWeb.net

Qui voglio illustrare un metodo CSS per la realizzazione di siti web con un rollover delle immaginisui link. Non si basa sul semplice preload della seconda immagine che si carica al passaggio del mouse, ma si combinano i due stati del link ( a:link e a:hover )  in un’unica immagine e si agisce sulla sua posizione ottenendo così un rollover istantaneo senza la necessità di caricare immagini aggiuntive. Questo metodo è molto interessante perchè riesce ad ovviare il bug che si presenta soprattutto con internet explorer 6 che lascia un vuoto per qualche secondo nell’immagine rollover, in attesa di caricamento al passaggio del mouse.

Tutto viene fatto con unà proprietà CSS, molto conosciuta dai webdesigner : background-position.

Infatti il rollover istantaneo viene ottenuto variando le coordinate dell’immagine stessa, in questo modo :

a.prova{
display:block;
width: 250px;
height: 55px;
background: url(logo.png) no-repeat 0px 0px;
}
a.prova:hover{
background-position: 0px -55px;
}

Questa semplice regola CSS permette di effettuare quindi un rollover di un immagine in maniera istantanea senza attendere il preload di una seconda, infatti , l’unica PNG caricata è logo.png.
Se notate bene nella regola applicata al rollover ( a.prova:hover ) le coordinate passano da 0px, 0px a 0px, -55px.

L’esempio potete vederlo passando il mouse sopra il logo di Walter web.

Un altro metodo potrebbe essere :

a.prova{
display:block;
width: 250px;
height: 55px;
background: url(logo.png) no-repeat top;
}
a.prova:hover{
background-position: bottom;
}

In questo caso anzichè le coordinate espresse in pixel vengono specificate attraverso la regola Top e Bottom.

Non ci sono limiti nell’applicazione di questo semplice accorgimento nel rollover: top, bottom, left, right. Basta creare un immagine con qualsiasi programma di grafica come se fosse una sorta di doppia immagine ed esprimere le relative coordinate in una regola CSS.