Rollover CSS con una sola immagine

Con l' utilizzo sempre più diffuso dei CSS il primo linguaggio è stato pian piano sostituito dai fogli di stile. Unica, forse, caratteristica che accomunava i due metodi era l' uso di due immagini distinte e separate; una per lo stato "off" e l' altra per lo stato "on" quando si passava su di essa con il mouse. Nell' articolo odierno vedremo, invece, come ottenere lo stesso risultato con una sola immagine.

Effettivamente si tratta di usare una sola foto. Potrebbe sembrare strano ma è così. Però... il trucco dov' è? Si tratta di preparare una foto che racchiuda entrambi gli "stati" [off - on] e di "giostrare" con il posizionamento all' interno del contenitore. Mi spiego meglio. Supponiamo di avere una immagine di dimensioni 100 pixel X 200 pixel composta, a sua volta, da due immagini di 100 pixel in larghezza e 100 pixel in altezza. Non si deve fare altro che far combaciare il bordo inferiore della prima con il bordo superiore della seconda, senza lasciare nessuno spazio tra di esse. Nel tutorial odierno ogni singola immagine ha le seguenti dimensioni: 260 pixel X 568 pixel. Stabilito questo concetto, procediamo con la scrittura del codice CSS.

Il codice CSS

Cominciamo con la dichiarazione del contenitore:

#box{ 
margin:0; 
padding:0;
position:relative; 
z-index:10; 
width:260px; 
height:284px;
}  

Oltre alle dimensioni, di cui ho scritto più su, da notare che è stato assegnato uno z-index; questo permette al box contenitore di non avere al di sopra di esso altri elementi. Il perchè lo vedremo dopo. Adesso assegniamo i vari stati delle pseudoclassi al contenitore stesso [per far si che appaia la mano quando passiamo su di esso]:

#box a{
display:block;
width:260px; 
height:284px; 
background:transparent url(NomeImmagine.jpg) 0 0 no-repeat;
text-decoration:none; 
} 

#box a:hover, #box a:focus, #box a:active
{
background-position: 0 -284px;
}  

Per lo stato a (link non ancora visitato) da notare la dichiarazione "display:block;"; significa che tutta l'area deve essere "sensibile" al passaggio del mouse e non solo una parte di essa. Nel nostro esempio che dimensioni ha l' area cliccabile? Ovviamente quelle della metà [in altezza] dell' immagine finale e che ho anche scritto: width:260px e height:284px. [568px / 2 = 284px]. Per quanto riguarda lo sfondo, assegneremo l' immagine stessa con le coorddinate 0 0 [per left e top] e che non deve ripetersi. La "velocità" del rollover con i CSS dipende soprattutto dal fatto che utilizzando le immagini come sfondo, si evita il precaricamento preventivo delle immagini.

Nel nostro caso tanto meglio perchè è come se ne abbiamo due, mentre è una sola. In ultimo eliminiamo la sottolineatura di default dei link con text-decoration:none. Per quanto riguarda gli altri tre stati [hover, focus, active] l' unica, ma molto importante, dichiarazione da assegnare è la sola posizione del background, cioè l' altra metà dell' immagine, vale a dire quella "nascosta" che non si vede all' apertura della pagina. La coordinata sinistra rimane sempre a 0 ma per il top facciamo in modo che l' altra parte dell' immagine "salga" e prenda il posto di quella superiore.

Questo è il motivo per cui si dichiara un valore negativo. Perchè -284 pixel? Se si rivedono bene le dimensioni dell' immagine finale, di cui ho scritto spesso proprio per non dimenticarle, tale misura [-284 pixel] è la metà esatta dell' immagine totale. Per finire, creiamo un elemento <span>, associato sempre al contenitore #box, il quale serve nel momento in cui un utente si avvale di programmi assistivi per la lettura delle schermo. Disabilitando i fogli di stile, la pagina deve essere ugualmente fruibile per tutti. Il codice è

#box a span{ 
position:relative;
z-index:-1; 
} 

L' unica cosa da notare è lo z-index negativo. Subito spiegato. Dovendo inserire una parola oppure una frase tra i tag <a href....> e </a>, facciamo in modo che si trovi al di sotto dell' elemento #box quando un utente utilizza un browser grafico. Se, invece, alla pagina non viene associato nessun foglio di stile, a video apparirebbe la parola, o frase, di cui ho scritto poc' anzi e che servirebbe per spostarsi all' interno o all' esterno dell' ipotetico sito.
Arrivato al termine del tutorial, non resta che mostrare la pagina di esempio finale.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati