La tecniche di Image Replacement consistono nel sostituire attraverso l’utilizzo dei CSS del puro testo HTML con contenuti visuali. L’utilizzo più diffuso è quello di sostituire il testo contenuto nel tag <h1> con il logo visuale del sito web.
Tali tecniche sono davvero tantissime e, per approfondirle, potete utilizzare i link agli articoli di Alessandro Fulciniti presenti in fondo alla pagina.
In questo articolo vedremo la soluzione più diffusa e, probabilmente, più semplice da implementare. Tale tecnica si basa sul nascondere il contenuto testuale attraverso due proprietà molto comuni dei CSS: il line-height e l’overflow.
Per spiegare i concetti del funzionamento dell’image replacement realizzeremo l’header di un comune sito web sostituendo il nome dell’azienda (testuale) con un logo in formato visuale.
Innanzitutto vediamo il codice HTML di cui avremo bisogno:
<div id="header">
<h1><a href="#">Html.it</a></h1>
</div>Visualizzando la pagina, senza aver ancora assegnato alcuno stile, vedremo che si leggerà chiaramente il testo “Html.it” con lo stile assegnato all’header h1 o all’ancora (link) in esso contenuto. Andiamo ora ad assegnare attraverso il CSS larghezza e altezza dell’header e ad inserire l’immagine di sfondo:
#header h1 a {
background: url('logo.jpg') no-repeat top left;
width: 450px;
height: 99px;
display: block;
}La proprietà display è utilizzata per rendere visualizzabile e cliccabile tutta la dimensione impostata, in caso contrario infatti sarebbe stato visualizzata solo la parte di logo sottostante il testo. Il risultato intermedio comunque non è sicuramente il massimo delle nostre aspettative. Dobbiamo ora applicare la nostra tecnica di image replacement per nascondere completamente il testo. Per fare ciò dobbiamo aggiungere due semplici regole al nostro CSS:
#header h1 a {
...
overflow: hidden;
line-height: 9999em;
}Visualizzando all’opera l’esempio, notiamo come il testo sia scomparso del tutto lasciando spazio al solo logo. Tutta l’area contenente il logo è completamente cliccabile quindi abbiamo raggiunto il risultato desiderato anche piuttosto facilmente.
La tecnica appena presentata non ha problemi di cross-browsing. Funziona infatti con tutte le versioni dei browser compreso Internet Explorer 6. Potrebbe presentare un problema con la versione 7 del browser di casa Microsoft nel caso la soluzione venga applicata ad elementi contenuti al termine della pagina, come ad esempio un piccolo logo in basso a destra del footer. Per risolvere il problema è sufficiente aggiungere un commento condizionale o un foglio di stile apposito per quella versione in cui settare il line-height a 0.
Perché utilizzare i CSS e non il tag <img>?
Prima di concludere l’articolo voglio rispondere ad una domanda che sicuramente molto si saranno posti. Perché utilizzare il CSS per nascondere il testo quando utilizzando il semplice tag <img> avremmo potuto impostare un testo alternativo da mostrare?
Domanda lecita dato che avremmo sicuramente risparmiato tempo e ottenuto lo stesso effetto. Bisogna però considerare un importante aspetto del binomio HTML/CSS: semanticamente il foglio di stile è utilizzato appunto per contenere tutti quegli elementi che vanno a determinare e fissare lo stile della pagina mentre il tag <img> dovrebbe essere utilizzato solo per i contenuti effettivi della pagina. In parole più semplici, il logo che abbiamo inserito non fa parte del contenuto della pagina come potrebbe esserlo tutto il testo ed altre eventuali immagini ma fa parte dello stile, ovvero di qualcosa che non va ad incidere sul contenuto effettivo. Per questo motivo è sempre bene separare le immagini della pagina da quelle utilizzate per il suo stile, come ad esempio immagini di background, loghi, ecc.
Approfondimenti
Per chi volesse approfondire questa tecnica, rimando agli interessanti articoli presenti su Html.it: