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:
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
- classetd
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
- classetd a:hover
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
- È fondamentale impostare la proprietà "display" con il valore "block" e quella "position" su "relative"
- In classetd a:hover
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!
