Tempo di Lettura: 1 minuti
L’altro giorno stavo provando a personalizzare i link della sidebar del mio tema WordPress con delle immagini in rollover: un giochetto da nulla ma l’ho effettuato non con il classico metodo delle 2 immagini distinte che si caricano a seconda se il mouse è sopra il link o meno, ma utilizzando il metodo del posizionamento del background.
Infatti se per il rollover si 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.
A volte, però, il caricamento dell’immagine associata all’evento hover, può provocare uno spiacevole effetto “vuoto”; questo fenomeno si accentua per un bug del browser Internet Explorer 6 e si ripropone ogniqualvolta si apre la pagina.
Il problema si risolve usando sempre una tecnica CSS attribuendo allo sfondo una unica immagine che, quando si attiva a:hover scorre l’immagine (avanti o indietro, sopra o sotto) di un certo numero di pixel, cambiando di fatto lo sfondo.
In questo ambito descriverò la tecnica usata per il mio template WordPress (che è molto simile a tanti altri, almeno per quanto riguarda la sezione della sidebar dei link dei post).
Innanzitutto caricare nella propria cartella images del proprio template il file icon_post.gif (l’immagine è stat presa dal tema minyx-theme).
Quindi aprire il file sidebar.php del proprio template e nella sezione degli ultimi articoli, inserire nel tag ul la classe “listPost”
Utilizzando un qualsiasi programma di grafica potrete dedurre le coordinate e le dimensioni di una selezione. Infine, aprire il proprio foglio di stile e inserire queste righe:
/* Rollover link in sidebar with class listPost*/
#sidebar ul li a{
padding:4px 0px 4px 35px;
display:block;
background-repeat:no-repeat;
}
#sidebar ul li a:visited{
background-position:5px 0px;
}
#sidebar ul li a:hover{
background-position:5px -23px;
}
#sidebar .listPost li a{
background-image:url(images/icon_post.gif);
text-transform:lowercase;
}
/* End Rollover link in sidebar with class listPost*/
Come vedete, per ogni link andranno specificati lo stato normale, lo stato hover e quello attivo, intervenendo sul background-position: da notare che le coordinate dello stato hover corrispondono alla posizione dello stato normale traslando, però, la coordinata “y” di 23 pixel verso il basso (quindi si assegnano valori negativi).