RollOver con la proprieta’ background-position

Oggi voglio farvi vedere una tecnica molto semplice ed efficace per realizzare l’effetto RollOver evitando di utilizzare il javascript che Dreamweaver vi costringe a usare quando richiamate il comando Insert > Image Object.

La tecnica consiste nell’utilizzo del solo CSS con il quale si carica un’ unica immagine che contiene le 2 versioni differenti per creare l’effetto: up e over.

Della nostra immagine faremo vedere solo una parte tramite la proprietà background-position.

Andiamo a vedere il codice html:

<div id=”link”> <a href=”#”>link</a></div>

Come vedete richiamiamo un id o una classe (a vostra scelta) a cui diamo il nome link all’interno di un div che contiene il tag a con il testo, in questo caso link.

Anche se non verrà visualizzato a monitor vi consiglio di inserire il testo perché altrimenti se intendete scrivere codice convalidato vi darà errore.

Andiamo a vedere adesso i CSS:

#link a{ display:block; width: 100px; height: 30px; background: url(link.jpg) 0 0 repeat; margin: 0 0; text-indent: -9999px;}

#link a:hover{background-position: 0 -30px;}

Esaminiamo la prima riga del nostro CSS.

Inseriamo il display:block perchè questo ci da modo di dare un’altezza e una larghezza al nostro tag a.

La nostra immagine è alta 60px ma noi inseriamo un altezza di 30px per far vedere solo la parte alta della nostra immagine. Richiamiamo quindi l’immagine posizionandola all’interno del nostro div in alto e a sinistra come indicato dai valori 0 0 inseriti prima del repeat.

Mettiamo il margin a 0 per annullare qualsiasi margine creato dai browser e concludiamo con la proprietà text-indent che serve per nascondere il testo presente dalla visualizzazione del monitor; per essere sicuri che non venga visualizzato inseriamo -9999px;

Abbiamo quasi concluso, infatti  basterà richiamare la sola proprietà background-position nell’hover con un -30px per l’asse verticale e 0 per quello orizzontale, in modo tale da visualizzare la parte inferiore della nostra immagine.

In questo modo abbiamo il nostro effetto RollOver con solo 2 righe di CSS.

Ps: quando create l’immagine fate attenzione che le due scritte siano posizionate correttamente sull’asse verticale e orizzontale del file, altrimenti nell’effetto visualizzerete uno spostamento della scritta che non è piacevole.