Rollover sequenziale con i CSS

Possiamo dire che il presente tutorial è una evoluzione del precedente, in quanto si avvale sempre di una sola immagine ma contenente già i due stati. Cominciamo a vedere l´immagine utilizzata per l´esempio. Fatta questa premessa, inseriremo l´immagine in un contenitore il quale non visualizzerà il file grafico per intero, ma solo la parte superiore. Quando passeremo con il mouse su di un colore, lo stesso verrà reso non più nello stato opaco, ma con il colore pieno al 100%. Per poter realizzare quanto appena descritto, ci avverremo di un semplice elenco non ordinato, contrassegnato dai tag <ul> e </ul>. Un esempio di tale elenco "spoglio" è possibile vederlo nel file che ho preparato. Esso contiene solo le 6 voci che appariranno al termine del tutorial, al di sotto dell´immagine, man mano che si passerà su un colore.

Il codice CSS

Per prima cosa eliminiamo margini, padding e marcatore di lista al nostro elemento #container:

ul#container,ul#container li{ 
margin:0; 
padding:0; 
list-style:none;
}  

Adesso la lista: verranno assegnate le dimensioni [altezza e larghezza], l´immagine di sfondo [la barra dei colori] e la dichiareremo position:relative. Questo posizionamento è molto importante, oltre che necessario, in quanto consente di posizionare un elemento al suo interno con position:absolute.

ul#container{
position:relative; 
width:300px; 
height:25px; 
background:transparent url(colori.gif);
margin: 0 auto; 
}  

Notare la dimensione che ho scritto per l´altezza; non credo di aver sbagliato in quanto a noi serve, al momento dell´apertura della pagina, vedere solo una parte dell´immagine. Ma "quanto"? 25 pixel, appunto. Infatti la nostra barra dei 6 colori è alta, in totale, 31 pixel così suddivisi: 25 px in altezza, per la parte alta ed opaca; poi ci sono 6 pixel di spazio bianco [avrei potuto anche non metterlo] ed infine altri 25 pixel [la parte con colore pieno]. Arriviamo adesso a dichiarare il list-item <li>:

ul#container li{ 
position:absolute;
top:0; 
left:0;
height:25px;
}  

Ogni singolo elemento della lista viene posizionato nel punto più alto e più a sinistra. L´altezza, come abbiamo già detto, è di 25 pixel. La parte di codice che andremo a vedere adesso, è quella che possiamo definire il "cuore" di tutto. Verrà assegnato, attraverso il posizionamento assoluto, lo spazio utile al quale applicare il link; ma andiamo con ordine:

li#sez1{
width:50px;  
z-index:6;
}
li#sez2{ width:100px; z-index:5 }
li#sez3{ width:150px; z-index:4; }
li#sez4{ width:200px; z-index:3; }
li#sez5{ width:250px; z-index:2; }
li#sez6{ width:300px; z-index:1 }

Ogni elemento <li> viene distinto da un ID unico. Per rendere più semplice la comprensione, ho fatto in modo da rendere un colore come una "sezione" [ecco perchè #sez1, #sez2 ecc...]. Adesso non si deve fare altro che indicare la dimensione per ogni singolo colore. Il primo sarà largo 50 pixel, il secondo 100 pixel, fino ad arrivare alla misura totale dell´immagine, vale a dire 300 pixel. Perchè usare lo z-index? Perchè i link sono sovrapposti e si deve stabilire un "ordine" di visualizzazione. Siccome il primo link ha uno z-index maggiore rispetto agli altri [ 6 ], quando passeremo con il mouse su di esso è come se lo avessimo passato su tutti quanti. Lo z-index maggiore fa in modo che sia l´unico ad essere rilevato in quel momento. Per intenderci: quando saremo sul quarto colore, ci disponiamo sul quarto, quinto e sesto. L´elemento <li> che ha uno z-index maggiore, viene visualizzato prima di tutti gli altri, che sono sotto di esso.

Le pseudoclassi agli elementi <li>

Passiamo ora a definire lo stato dei link sugli elementi di lista:

ul#container li a{ 
display:block;
padding:25px 0 0 0; text-decoration:none; }

Per quanto riguarda i link, vengono resi display:block perchè tutto lo spazio deve essere reso "utile" al passaggio del mouse; inoltre viene assegnato un padding superiore di 25 pixel [quanto l´altezza di ogni singolo colore].

ul#container li a:hover{ 
background:#fff url(colori.gif) no-repeat 0 -31px;
} 

Lo stato :hover, cioè il rollover, merita particolare attenzione in quanto, come è possibile vedere dal codice, viene assegnata una misura negativa. Quando passeremo con il mouse sul colore opaco dovremo visualizzare il corrispondente "pieno". Come? All´immagine di sfondo basta assegnare una posizione verso l´alto pari all´altezza della stessa immagine più i 6 pixel che separano la prima fila di colori dalla seconda; quindi 25 pixel + 6 pixel = 31 pixel. Di tanto l´immagine deve essere "spostata".

Lo <span> per nascondere il testo

Se, durante il rollover, vogliamo contemporaneamente mostrare del testo dobbiamo affidarci al tag <span>. Nello stato di link non ancora visitato, il testo non sarà stampato a video. Nello stato :hover, invece si.

ul#container li a span{ 
display: none; 
}

ul#container li a:hover span{ 
display:block;
font-weight:bold;
position:absolute 
top:25px; 
left:0; 
margin:0; 
padding:4px; 
width:290px;
text-align:center;
} 

Credo che il codice appena scritto non contenga nulla di particolarmente difficoltoso. Esso stabilisce che la scritta apparirà al centro e distaccata dall´immagine di 4 pixel; posizionata in maniera assoluta con le coordinate di 25 pixel dall´alto e 0 da sinistra. Al termine di tutto questo codice vediamo nel file finale di esempio come funziona questo rollover "in sequenza".

Una piccola sorpresa

Sperando di non essermi dilungato molto su questo argomento, e che sia stato sufficientemente chiaro nell´esporlo, voglio riservare, per i più pazienti, una piccola sorpresa. Adattando il codice che abbiamo visto fino ad ora, mi sono permesso di "scoprire in sequenza" una bella ragazza! Si, proprio così. Ancora qualche secondo e potrete vederla anche voi. Non ho fatto altro che realizzare una immagine composta, anche questa volta, da due parti: la parte superiore di colore rosa, in omaggio alla donna :)));
la parte inferiore la foto di una ragazza.
Quando siamo con il mouse sul pannello rosa, man mano che procediamo da sinistra verso destra, si vedrà apparire la foto sottostante... cioè? Vedete anche voi da questa pagina.

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