CSS  »  Articoli  »  CSS Sprite e Image Replacement 

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.

Altri articoli

Altre guide

Altre newsletter