Se date un'occhiata a qualche sito devoto ai CSS e all'implementazione dei linguaggi standard del W3C, troverete tra gli argomenti più gettonati proprio quello dell'articolo che state leggendo. Ovviamente, insieme alla teoria va di pari passo la pratica. E non è escluso che senza rendervene conto abbiate già sperimentato questa tecnica. Dunque: è possibile ottenere il classico effetto del rollover senza adottare Javascript, addirittura senza immagini, solo con i CSS. Prima di entrare in dettagli, due parole in difesa del rollover.
Tra le tante tecniche che in questi anni hanno fatto la loro comparsa sulle pagine web, questa è senza dubbio tra le più utili, una di quelle che riesce a conciliare gradevolezza estetica e utilità. Cosa fa il rollover? Ti segnala che un certo elemento serve a qualcosa. Ti invita a cliccarci sopra. Insomma: produce feedback, come avviene nei migliori esempi di interfaccia utente.
D'altro canto, un buon effetto rollover deve tenere in considerazione il fattore peso. Delle immagini usate, ovviamente. Se al passaggio del mouse non visualizziamo che un segnaposto vuoto perché l'immagine da attivare non è stata caricata l'effetto sarà addirittura controproducente. Usando i CSS questo problema non esiste e con un pò di creatività potrete ottenere un risultato che non ha nulla da invidiare a quanto si può ottenere con le immagini. Con il vantaggio di pagine più leggere con codice più pulito.
Come si fa
Le modalità di implementazione di un rollover con i CSS sono diverse. Alcune utilizzano "trucchetti" come quello della gif trasparente. Altre si basano sugli aspetti avanzati della programmazione in CSS, con i soliti problemi di incompatibilità incrociate tra i vari browser. Su di esse trovate utili riferimenti nei link posti in fondo all'articolo. L'approccio qui proposto è, per così dire, di mediazione. Innanzitutto sarà applicato ad un ambito ben definito: barre di navigazione orizzontali o verticali. Inoltre, per mantenere la maggiore compatibilità possibile, useremo le classiche tabelle per definire la base del nostro layout.
Dunque, prima di partire diamo un'occhiata agli esempi. Il primo presenta una barra orizzontale, il secondo verticale. Salvate le pagine e copiate il codice nel vostro editor preferito. Noterete che il codice dei CSS è incorporato nel documento. È solo per comodità didattica. La pratica comune e il buon senso suggeriscono di collegare alla pagina un foglio di stile esterno.
La barra orizzontale
La tabella che definisce la barra è molto semplice:
<table width="100%" border="0" cellpadding="1"
cellspacing="0" class="bordotab">
Tre cose da osservare:
- La larghezza della tabella è espressa in percentuale per adattarsi automaticamente alla risoluzione dello schermo
- All'elemento <table> abbiamo applicato la classe "bordotab"
- L'attributo "cellpadding" ha come valore "1" per evitare piccoli bug di alcuni browser.
Seguono le celle. Nel nostro esempio la tabella presenta una riga (<tr>)
e cinque colonne (<td>), quante sono le voci del menu. Potete ovviamente toglierne o aggiungerne a vostro piacimento. A ciascun elemento <td> è stata assegnata la classe "classetd". Per quanto riguarda la parte html è tutto. Il cuore dell'applicazione è nel codice CSS compreso nel tag <style>.
Sono state definite quattro classi:
- bordotab - Viene assegnata all'elemento <table>. Definisce essenzialmente il font, il colore di sfondo, le caratteristiche del bordo (ulteriori commenti li trovate nel codice della pagine di esempio). Come potete osservare, manca la definizione del bordo destro. È un piccolo trucco per avere una tabella con bordi esterni e interni perfetti. Il bordo interno (e destro) sarà infatti definito per le singole celle. Se avessimo settato anche per la tabella un bordo destro, avremmo avuto all'estrema destra un bordo doppio. Un pò complicato, ma funziona!
- classetd - È la classe da applicare a tutte le celle della tabella. Anche qui impostazioni molto basic: font, sfondo, bordo destro (vedi sopra!)
Le altre due classi non sono applicate direttamente a nessun elemento, ma sono quelle che fanno la magia. Il motivo per cui non sono direttamente applicate è semplice e sarà chiaro anche ai neofiti leggendo l'articolo «Definire gli stili dei link con i CSS». Lì abbiamo parlato delle cosiddette "pseudoclassi": esse definiscono uno stile per un elemento al verificarsi di certe condizioni. Per cui la classe:
- classetd a definisce lo stile dell'elemento <td> quando esso contiene un link (<a>)
- classetd a:hover definisce lo stile dell'elemento <td> quando si passa col mouse sulla cella
Tutto chiaro? Per fare un rollover con i CSS si sfruttano le pseudoclassi! Semplice, no? Ma ora è necessario chiarire alcuni aspetti tecnici:
- In classetd a abbiamo impostato il colore di base del link.
- È fondamentale impostare la proprietà "display" con il valore "block" e quella "position" su "relative"
- In classetd a:hover modifichiamo il colore di sfondo e del testo per avere l'effetto rollover
A questo punto avete una barra con CSS rollover pronta all'uso. Giocate con i colori, con i font e date spazio alla vostra creatività!
Barra verticale
Il secondo esempio propone una barra verticale. Studiando il codice e leggendo i commenti capirete che il meccanismo di base è praticamente identico. Un elemento interessante è che nella classe "classetd a" abbiamo settato anche il padding. In questo modo si ottiene più spazio intorno al testo del link, con un effetto di maggiore efficacia. Provate a settare i valori a 0 per vedere cosa cambia.
Riferimenti
Un'eccellente risorsa sull'argomento con svariati link è un articolo comparso sul sito Web Reference. È una specie di summa delle varie tecniche possibili. Da leggere subito!
