CSS - Fast Rollover senza Preload
Novembre 2nd, 2008 • 1,313Qui 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
