Abbiamo parlato in diverse occasioni di rollover grafico, ad esempio nella
serie Menu grafici con rollover e preload via CSS e
nell'articolo Grafica per blog con i CSS.
In questo appuntamento riprenderemo le basi della tecnica, presentando
un semplice esempio, costituito da un solo link.
Si tratta di un ottimo modo per rendere graficamente piacevole un link
importante della pagina, quei link che veicolano funzionalità del tipo:
- Iscriviti gratis
- Registrati ora
- Richiedi informazioni
- Richiedi un preventivo
- Maggiori dettagli
- Inizia il tour
- Ordina il prodotto
- Procedi con la registrazione
- Conferma l'ordine
In generale si tratta quindi di link presenti nei siti che offrono prodotti
e/o servizi, e un singolo link ben visibile e ben presentato può fare la differenza
determinare, o quanto meno favorire, il click da parte dell'utente.
Vedremo qui come sia possibile attraverso una singola immagine trasformare
un semplice link testuale, che in assenza di CSS si presenta così:
In un link decisamente accattivante e funzionale, presentato in questo modo:
Esempio di base
Cominciamo così presentando l'esempio di base,
un semplice link-bottone con grafica e CSS. Il markup è il più semplice possibile:
si tratta di un solo link con class="button", che potrà essere
inserito come ultimo elemento di un paragrafo oppure all'interno di un div, come
nel caso dell'esempio. Qui di seguito l'unica immagine di sfondo utilizzata
nell'esempio:
Il CSS è costituito da due sole regole: una per lo stato normale del link,
e uno per lo stato :hover. In sostanza si tratta di:
- Rendere il link
display:blockcosì da potergli attribuire le dimensioni - Eliminare la sottolineatura tipica dei link
- Assegnare le proprietà del testo e centrarlo
- Definire colore del testo e immagine di sfondo
In fase :hover basterà definire un colore del testo più acceso, così da
accompagnare il passaggio del mouse. Vediamo per intero le due regole:
a.button{display: block;width: 145px;height: 35px;
margin: 1em;text-decoration: none;text-align: center;
font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
background: url(bottone.png);color: #286C98}
a.button:hover{color: #0D4B72}
Da evidenziare che per la centratura orizzontale è bastato dichiarare
text-align:center, mentre per quella verticale è sufficiente
specificare l'altezza di linea nello shorthand font
(indicata da /35px nel codice sopra) pari all'altezza del link.
Bastano una semplice immagine e due sole regole CSS per rendere accattivante il
nostro link-bottone. Ma si può fare di più, rendendolo ancora più piacevole e funzionale
grazie al rollover.
Esempio 2
Nel secondo esempio viene quindi aggiunto
all'esempio di base il rollover grafico: al passaggio del mouse il nostro link-bottone
cambia colore di sfondo, come nello screenshot allegato:
L'effetto è ottenuto grazie al fast CSS rollover di cui abbiamo parlato
in questa pagina
della serie Menu grafici con rollover e preload via CSS.
La modifica sostanziale rispetto all'esempio di base è inanzitutto grafica: si
tratta infatti di combinare in un'unica immagine lo stato normale e lo stato :hover. Ecco l'immagine
di sfondo dell'esempio:
Il principio su cui si basa il fast CSS rollover è semplice ed efficace: in sostanza
si combinano i due stati del link in un'unica immagine e si agisce sulla posizione
dell'immagine di sfondo ottenendo così un rollover istantaneo senza la necessità
di caricare un'immagine aggiuntiva per la transizione sul passaggio sulla fase :hover.
Nel caso dell'esempio le due porzioni dell'immagine
sono ciascuna 145 per 35px, basterà traslare quindi in fase hover verso l'alto
l'immagine di background. Ecco le due regole CSS:
a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(bottone2.png) no-repeat 0 0}
a.button:hover{background-position:0 -35px;color: #98286C}
Da notare le due coordinate del background-position sulla seconda
regola: il primo numero (lo zero) indica la posizione sull'asse orizzontale, mentre
il secondo quella verticale. Un valore negativo corrisponde ad una traslazione verso
l'alto, che mostrerà quindi in fase :hover la porzione di immagine corrispondente.
Esempio 3: eliminare il flickering su IE6
Il secondo esempio che abbiamo appena visto
è semplice ed efficace, ma soffre del flickering, un problema che affligge Internet Explorer 6.
In sostanza il flickering è un problema causato cambiamento del background-position,
che provoca una latenza di rollover e in alcuni casi il ricaricamento dell'immagine
con conseguente inutile trasferimento di dati dal server. Questo ritardo nel rollover
è inoltre piuttosto fastidioso per l'utente.
Il modo più semplice per risolvere il flickering di IE6, come abbiamo fatto in diverse
occasioni qui negli articoli di HTML.it, è bufferizzare la porzione di
immagine in fase :hover sul contenitore del link, che è tipicamente un elemento di lista
o un div.
Se è vero che da Novembre 2006 è uscito IE7, è anche vero che IE6 è ancora piuttosto diffuso,
e ad oggi (fonte w3Schools)
conta una percentuale di poco inferiore al 40%.
Tornando al flickering, quello che vorremmo è però una soluzione che non presenta
vincoli implementativi e in particolare che non necessiti di elementi aggiuntivi
nel markup. Ci sono diverse soluzioni alternative, molte delle quali vengono
presentate in Minimize flickering css background images in ie6.
Tra le tante, la soluzione da preferire è forse Caching in IE,
non richiede la interventi sul CSS ma solo sul file .htaccess.
Una soluzione alternativa basata invece su Javascript è stata presentata di
recente in questa
pagina. Vediamo quindi il terzo esempio, ispirato proprio da quest'ultima
soluzione. Il CSS è identico al secondo esempio, l'unica aggiunta riguarda un piccolo
file Javascript linkato nella sezione head della pagina attraverso il commento
condizionale. Ecco la riga aggiuntiva:
<!--[if IE 6]> <script type="text/javascript" src="fixflicker.js"></script><![endif]-->
Il file fixflicker.js è decisamente breve, ecco il suo contenuto:
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
Esempio 4: una soluzione CSS
Nel terzo esempio abbiamo visto come sia possibile ovviare al flickering di IE6 con
un piccolo script: ma c'è una questione... non tutti gli utenti hanno Javascript abilitato,
anche se si stima che all'incirca il 95% lo abbia.
C'è un'altra alternativa, un po' più radicale forse, ma che non richiede Javascript nè modifiche
e/o aggiunte nella sezione head della pagina. Ecco quindi il quarto esempio,
in cui si esclude il rollover su IE fino alla versione 6 inclusa.
Si avrà quindi il rollover
grafico su IE7, Opera, Firefox e Safari, mentre su IE6 e IE5.5 il passaggio :hover interverrà
solo sul colore del testo. Ecco quindi le tre regole CSS dell'esempio:
a.button{display:block;width: 210px;height: 35px; margin: 1em;
text-align:center;font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
text-decoration: none; color: #286C98;
background: url(bottone4.png) no-repeat 0 0}
a.button:hover{color: #0D4B72} /*per IE fino alla versione 6*/
html>body a.button:hover{background-position:0 -35px;color: #98286C} /*per gli altri browser*/
Da notare quindi che la terza regola è rivolta solo ai browser capaci di interpretare il child selector
(simbolo di maggiore) escludendo quindi IE fino alla versione 6.
Conclusioni
Abbiamo visto in questo appuntamento alcune soluzioni per ottenere un link grafico con rollover
attraverso diversi esempi, trattando anche alcune strategie per risolvere il flickering di IE6.
La compatibilità degli esempi è buona: sono stati testati con successo sulle versioni di IE dalla
5 alla 7, oltre che sulle ultime versioni di Firefox, Opera e Safari.
Da notare in conclusione che gli esempi usano quattro immagini diverse, lunghe abbastanza
da contenere il testo al loro interno. Si potrebbe ottenere una soluzione più flessibile
con l'aggiunta di uno span all'interno del link, come abbiamo fatto ad esempio nell'articolo
menu con tab grafiche,
a cui rimando la lettura per eventuali approfondimenti. Da notare infine che le tecniche qui
viste possono essere applicate per creare bottoni grafici per i form, come abbiamo fatto
ad esempio nell'articolo Form grafico con i CSS.
Codice e immagini sono disponibili per il download. Alla prossima.
