I fondamenti del rollover grafico: immagini, sprite e text-replacement

Il rollover grafico è uno degli aspetti fondamentali del web design ed è un argomento che abbiamo trattato in moltissimi articoli qui sulla sezione CSS: a partire dall’ormai datata serie (ma a parer mio sempre attuale) dedicata ai menu grafici con rollover e preload, passando per gli spotlight con i CSS, ai bottoni flessibili con rollover fino ad arrivare alle sperimentazioni con il menu gloss con i CSS e JQuery solo per citarne alcuni. Manca però in questa sezione un articolo che sia totalmente incentrato su un concetto così imporante: in questo appuntamento faremo una sorta di riepilogo esplorando le diverse soluzioni pratiche che ogni web designer e/o appassionato avrebbe bisogno di conoscere. Sarà inoltre un ottimo modo per raccogliere in unico articolo i casi più rappresentativi di rollover.

Prima di cominciare, è importante fissare un concetto. Ci sono alcuni elementi di una pagina che hanno una predominanza di utilizzo per la loro natura: l’header, il menu, le foto e i bottoni, ovvero tutti quegli elementi ipertestuali che non sono semplici link di testo. È importante accompagnare ogni passaggio su link con una transizione che sia visivamente percettibile, così da far capire all’utente un potenziale cambiamento di stato o pagina. Lo è ancora di più per gli elementi che abbiamo appena citato e la loro natura squisitamente grafica è un ottimo spunto per arrichire l’esperienza di navigazione dell’utente. Vedremo qui come sia possibile farlo tecnicamente nel migliore dei modi. Cominciamo.

Rollover disgiunto

Cominciamo questa serie con un semplicissimo esempio: un link-bottone con rollover, ottenuto con una semplice classe "button" attribuita sul link (<a class="button">..</a>). La grafica che caratterizza l’esempio è costituita da due immagini di sfondo distinte: una per lo stato a riposo del bottone e una per lo stato hover, su cui viene poi sovrapposto il testo del bottone.

Figura 1 – I due stati del bottone

Il CSS dell’esempio è piuttosto semplice: si tratta di rendere il link block-level, per poi attribuire dimensioni, altezza di linea e centratura del testo al link, insieme alle proprietà sul testo. Vediamolo per intero:

Concentriamoci per ora sul meccanismo di rollover, e in particolare sulle due dichiarazioni chiave che corrispondono ai due sfondi per i due stati:

In stato normale viene attribuita l’immagine per il bottone un po’ più tenue, per poi mostrare in fase “hover” lo sfondo più acceso così da accompagnare il rollover. Quello che succede in questo caso è che però al primo caricamento di pagina e sul primo passaggio del mouse si verifica una latenza percettibile anche con la più veloce ADSL. Questo perchè il browser interpreta il CSS e richiede la seconda immagine di sfondo al bisogno, cioè solo in fase hover. Questa latenza sparisce in passaggi successivi al primo e visite seguenti, fintanto che l’immagine per la fase :hover resta nella cache del browser.

Sebbene questa latenza sia in alcuni casi accettabile (per esempio per poche immagini e di piccole dimensioni) sarebbe meglio evitarla per poter offrire in ogni contesto un’esperienza di navigazione fluida per i nostri visitatori. Chiameremo questo tipo di rollover che prevede due (o più) immagini distinte rollover disgiunto.

Personalmente, ritengo che adottare un rollover disgiunto come nel caso dell’esempio sia una scelta implementativa poco professionale il più delle volte. C’è però un caso in cui il rollover disgiunto è accettabile, e sarà il nostro prossimo caso.

Prima di procedere, ci tengo a citare gli approfondimenti sulla creazione di bottoni grafici con i CSS: Bottoni con rollover, Bottoni con rollover flessibili e Bottoni gloss con Gimp e Inkscape.

Quando il rollover disgiunto è accettabile

Il nostro secondo esempio è un classico menu a tab semigrafiche in cui la tab corrente e quella in fase hover vengono mostrate aperte: anche in questo caso ogni singolo link può assumere due distinte immagini di sfondo.

Figura 2 – Il menu a tab con due immagini distinte.

Ora vediamo il CSS per intero:

div#menu { padding:150px 0 0 0; background:#CCC }

div#menu ul { width:100%; height:30px; list-style: none; 
             margin:0; padding:0; background:url(line.png) repeat-x bottom }

div#menu ul li { float:left; margin: 0 0 0 5px; padding: 0 }
div#menu ul a  { float:left; width:100px; height:30px; line-height:30px;
                 background:url(tab-c.png); text-decoration:none;
                 color:#555; text-align:center }
div#menu ul a.active, div#menu ul a:hover { background: url(tab-n.png) }
div#menu ul a.active{ color:#000  

Il CSS non è particolarmente difficile e riprenderemo in seguito gli approfondimenti per la creazione del menu. Vale la pena di focalizzarsi anche in questo caso sulle due immagini utilizzate e le dichiarazioni che le impiegano:

div#menu ul a { background: url(tab-c.png) }
div#menu ul a.active, div#menu ul a:hover { 
                background: url(tab-n.png) }

Come si può notare l’immagine per lo stato hover è dichiarata anche per il link attivo (con classe "active" nell’HTML) cosicché al caricamento della pagina entrambe le immagini per i due stati dei link risultano caricate. In questo caso quindi non si verificherà latenza nella fase di rollover, dato che l’immagine corrispondente risulterà già nella cache del browser.

Questo è comunque un caso particolare, dato che lo stato attivo e quello hover utilizzano la stessa immagine di sfondo (anche se vengono visivamente differenziati dal colore del testo). Quello di cui abbiamo bisogno è un approccio generale per avere rollover veloci e funzionali in tutti i casi. Sarà argomento del prossimo esempio. Ma prima, ecco gli approfondimenti sulle tab grafiche: Menu con tab grafiche, Tab grafiche centrate e Interfacce a tab con CSS e Javascript.

Fast CSS rollover

Presentato ormai cinque anni fa per la prima volta su HTML.it in questa pagina della serie Menu grafici con rollover e preload via CSS, il Fast CSS Rollover è tuttora la tecnica più efficace ed utilizzata per ottenere rollover istantanei e funzionali.

L’idea di base è semplice: combinare due (o più) stati dei link in un’unica immagine, per poi intervenire sulla proprietà background-position e mostrare la porzione dell’immagine necessaria per un dato stato.

Un simile approccio presenta molteplici vantaggi:

• consente rollover istantanei senza latenze e senza la necessità di preload;
• alleggerisce le nostre pagine: un’immagine che racchiude i diversi stati dei link pesa sicuramente meno della somma del peso delle immagini prese singolarmente;
• velocizza le nostre pagine in quanto riduce il numero di trasferimenti HTTP necessari.

Detto ciò, possiamo senza indugio presentare l’esempio: un semplice menu a due stati con rollover che impiega proprio il Fast CSS Rollover. Per prima cosa, vediamo l’immagine che viene usata come sfondo per le singole voci del menu:

Figura 3 – l’immagine per il menu

Si può notare che essa racchiude i due stati del menu: la parte superiore indica lo stato normale, mentre la parte inferiore è quella corrispondente alla fase hover. Come abbiamo detto prima, si tratta a questo punto di giocare con background-position, tenendo presente che questa proprietà accetta coppie di valori coordinata-x coordinata-y e valori negativi avranno l’effetto di traslare lo sfondo verso l’esterno dell’elemento che lo contiene. In particolare, un valore negativo sulla coordinata x corrisponde a una traslazione dello sfondo verso sinistra, mentre un valore negativo sulla y causerà una traslazione verso l’alto. È proprio quest’ultima nozione che ci serve allo sviluppo del nostro esempio, e rimando all’articolo Posizionare il background per approfondimenti sulla proprietà background-position. Vediamo a questo punto il CSS dell’esempio per intero:

Anche in questo caso, le regole che ci interessano ai fini del rollover sono quelle che riguardano i link. Vediamo le dichiarazioni chiave:

Per quanto riguarda il rollover dell’esempio, bastano quindi due semplici dichiarazioni: Per stato normale dei link viene dichiarata l’immagine di sfondo e positionata nell’angolo in alto a sinistra, mentre per la fase hover questa viene traslata verso l’alto così da mostrare la sua porzione corrispondente. Il numero di stati grafici dei link si può estendere con lo stesso principio: è il caso del prossimo esempio.

Fast CSS rollover – estendere il numero degli stati

Il nostro secondo esempio che impiega il fast CSS rollover non è altro che un’estensione di quello che abbiamo appena visto: si possono differenziare ulteriormente gli stati grafici dei link così da avere un menu ancora più ricco. Vediamo l’immagine che compone l’esempio:

Figura 4 – Immagine per menu a 4 stati

Dall’alto verso il basso, abbiamo in un unica immagine i quattro stati possibili grafici dei link del menu:

1. Stato normale
2. Fase :hover
3. Link che indica la pagina corrente
4. Link premuto (fase :active)

Basta a questo punto regolare la proprietà background-position per visualizzare i quattro possibili stati. Ecco il codice interessato:

Un approccio simile rende il nostro menu piacevole e funzionale: l’utente distingue subito il link alla pagina/sezione corrente, c’è un rollover istantaneo sugli altri link e quando essi vengono premuti diventano graficamente ancora più marcati.

I due ultimi esempi appena visti hanno però una limitazione intrinseca: i link dovranno essere a larghezza determinata e pari a quella delle immagini di sfondo. Questo limite si può superare con un piccolo accorgimento. Sarà il prossimo argomento e lo affronteremo nella seconda parte dell’articolo

Rollover flessibili

Se per questioni di design si volessero realizzare link grafici che siano auto-adattanti in larghezza, il concetto del Fast CSS Rollover si può estendere facilmente a questa necessità. Due esempi eccellenti a tal proposito sono i Bottoni con rollover flessibili e le Menu con tab grafiche che riprenderemo brevemente in questo articolo.

Cominciamo con l’esempio con il bottone flessibile: in questo caso un link ha l’aspetto di un bottone con altezza determinata e larghezza necessaria al testo, e presenta un accattivante effetto rollover. Cominciamo con l’immagine di sfondo utilizzata:

Figura 5 – Immagine per il bottone semi-grafico

Da notare il markup usato nell’esempio: all’interno del link vi è uno span che ci consente di ottenere un aggancio grafico, indispensabile ai fini della tecnica. Lo span, ricordo, è un elemento inline e totalmente neutro che non intacca contenuti né presentazione di default dei link. Questo aggancio grafico ci consente di poter assegnare due porzioni dell’immagine (ovvero agli estremi, superiore o inferiore) e di avere lo sfondo che si adatta al contenuto. Rimando all’articolo Bottoni con rollover flessibili per approfondimenti sulla costruzione grafica, ecco il CSS dell’esempio per intero:

Da evidenziare l’uso delle keyword top, right, bottom e left invece che le coordinate in pixel dell’esempio precedente: in questo caso si rivelano pratiche nonchè indispensabili.

L’idea del rollover flessibile sul nostro bottone si può estendere facilmente a un menu, in cui ciascuna delle voci occupa la larghezza necessaria al contenuto più un eventuale padding per questioni grafiche. Nell’articolo Menu con tab grafiche abbiamo usato un rollover disgiunto, ma ci si può spingere oltre utilizzando un’unica immagine. Ecco quindi la nuova versione del menu con tab adattanti, di cui riporto uno screenshot:

Figura 6 – Il menu a tab

L’immagine di sfondo che compone l’esempio rappresenta una voce del menu e combina i due stati: nella parte superiore abbiamo lo stato normale, che include una linea al fondo; nella parte inferiore c’è la porzione corrispondente alla tab aperta o in fase hover.

Figura 7 – Immagine per di sfondo per il menu a tab

Per quanto riguarda il markup, anche in questo caso è necessario uno span che contiene il testo dei link per le ovvie necessità grafiche. Il CSS è invece piuttosto semplice, e sono poche le modifiche rispetto all’esempio con rollover disgiunto che abbiamo visto in apertura di articolo. Ecco il codice per intero:

Anche in questo caso l’idea del fast CSS rollover si può estendere su un numero di stati superiori a due: quello che ho notato è che però alcuni browser non supportano bene l’uso congiunto di keyword e pixel per il posizionamento delle immagini. Una possibile soluzione potrebbe essere quella di utilizzare due immagini di sfondo e combinare due stati per ogni immagine, assicurandoci però che il menu in stato di riposo sfrutti entrambe le immagini. Una sorta di mix tra rollover disgiunto e fast CSS rollover quindi. Una possibile alternativa è realizzare link totalmente grafici, che includano quindi anche il testo nell’immagine stessa. Sarà il prossimo argomento.

Image replacement e rollover

Il fast CSS rollover per la sua natura grafica si presta benissimo a ulteriori possibilità, e combinato con l’image replacement consente di rimpiazzare testo con elementi grafici che dispongano di un rollover instantaneo. Per quanto riguarda l’image replacement, ecco le risorse disponibili qui su HTML.it:

• Le tecniche di image replacement,
• List-item Image Replacement,
• Rimpiazzare immagini con la MIR,
• Image replacement: le tre tecniche migliori.

Vediamo ora il nostro prossimo esempio: si tratta di un header grafico con image replacement e fast CSS rollover. Per prima cosa vediamo il markup:

Si tratta di un titolo h1 che contiene un link, il cui testo è preceduto da uno span vuoto. Il motivo di questo elemento aggiuntivo, che non influenza in alcun modo il contenuto della pagina, è perché useremo la Cover-up span. Ma prima di addentrarci nel CSS, ecco l’unica immagine che compone l’esempio:

Figura 8 – Immagine per il logo

Per quanto riguarda il CSS, si tratta in sostanza di nascondere visivamente il testo, rimpiazzarlo con la grafica e intervenire con il background-position nella fase :hover del link. Ecco il CSS per intero:

Il nostro header viene posizionato relativamente così da consentire il posizionamento assoluto al suo interno, mentre per il titolo imposteremo un font-size piccolo oltre che annullare i margini. Il link verrà quindi posizionato assolutamente di grandezza pari al logo. Lo span infine verrà posizionato assolutamente all’interno del link, con le sue stesse dimensioni così da coprirlo per intero: verrà attribuita infatti l’immagine di sfondo, la cui background-position sarà modificata per lo stato :hover del link.

Combinare i rollover: la “Navigation Matrix”

Ovviamente fast CSS rollover e Image Replacement possono essere applicati su link multipli e menu: un esempio notevole in questo senso è il sito della Apple, che implementa un menu totalmente grafico a quattro stati con una sola immagine.

In sostanza si tratta di dichiarare un’unica immagine di sfondo per tutti i link, per poi specificare per ciascuno di esso le coordinate background-position per i vari stati. La tecnica è stata introdotta diverse volte qui su HTML.it e mi limito a presentare alcuni approfondimenti:

• Menu Orizzontale con Navigation Matrix con relativo esempio
• Spotlight con i CSS con esempio
• Un menu gloss con CSS e JQuery con relativo esempio

L’ultimo articolo presenta inoltre un’interessante sperimentazione per ottenere transizioni con opacità variabile grazie a JQuery.

Download e conclusioni

Abbiamo visto in questo articolo gli esempi più rappresentativi di rollover grafico con i CSS: (header, bottoni e navigazione) ripercorrendo brevemente le varie strategie implementative. Gli esempi qui visti hanno una buona compatibilità: sono stati infatti testati su IE dalla versione 6 alla 8, oltre che su Opera, Firefox, Safari e Chrome. Codice, immagini ed esempi sono disponibili per il download. Alla prossima.