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).
Commenti Recenti