Bottoni con rollover

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ì:

Figura 1 – Un link in assenza di CSS

In un link decisamente accattivante e funzionale, presentato in questo modo:

Figura 2 – un link con grafica CSS

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:

Figura 3 – Immagine di sfondo per il link-bottone del primo 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:block così 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:

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:

Figura 4 – Esempio di rollover grafico:

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:

Figura 5 – Immagine di sfondo del secondo 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:

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:

Il file fixflicker.js è decisamente breve, ecco il suo contenuto:

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:

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.