CSS  »  Articoli  »  CSS Sprite e Image Replacement 

In questo articolo presenterò alcune tecniche di Image Replacement, indicandone i principali pro e contro. Anzitutto, cerchiamo di capire di cosa parleremo. Una tecnica di Image Replacement è un modo per sostituire mediante i fogli di stile un' informazione testuale con un' informazione visuale. Questa informazione testuale generalmente è un header, cioè il logo o il titolo di una sezione di una pagina web, ma in via teorica sarebbe possibile rimpiazzare con un background il contenuto di un' intera pagina web. Ho parlato di un' informazione visuale, ma in realtà più propriamente avrei dovuto parlare di immagine di sfondo. Vedremo in seguito il perchè.

La soluzione html ai contenuti visuali

Un informazione visuale, espressa attraverso il tag <img> ha un contenuto visuale effettivo. E' buona norma l'uso degli attributi alt e title. Ricordo che l' alt è un attributo per le immagini che ha molteplici funzioni:

• Viene mostrato quando l' immagine non è presente sul sito
• Quando l' utente ha impostata l' opzione del browser che consente di non caricare nè visualizzare le immagini.
• Viene riportato il testo associato nei browser testuali
• Viene pronunciato dagli screen reader

L' attributo alt è necessario per la validazione di una pagina html. Mentre l' attributo title è opzionale e serve per indicare un titolo o una breve descrizione di un immagine e, anche se non è un attributo obbligatorio, è decisamente consigliato.

Immagini con contenuti testuali

La maggior parte dei siti professionali come header di ogni pagina html usa un' immagine con un logo, un brand o una scritta con un font particolare per far sì che il sito abbia un aspetto grafico accattivante e che l' immagine della ditta sia facilmente riconducibile a tale logo. Ecco un buon codice html per riportare un' immagine al posto del classico <h1> testuale. Supponiamo che la ditta si chiami "Pippo Pippo" e che faccia ombrelli:

<div id="header">
    <h1>
        <img src="logo.jpg" alt="Logo della ditta Pippo Pippo" title="Pippo Pippo, ombrelli e affini dal 1956">
    </h1>
</div>

Pro e contro dell' uso delle immagini

L' uso di immagini con contenuti testuali attraverso il tag img ha, oltre i vantaggi derivanti dell' uso dell' alt text, il vantaggio che, a differenza di un' immagine di background, viene stampata di default dai browsers. Ha uno svantaggio non indifferente però, che è quello di non consentire personalizzazioni del contenuto. Non è possibile, se non sovrascrivendo l' immagine o modificando l' html, cambiare la presentazione della ditta con un nuovo logo o un classico header testuale.

Le tecniche di Image Replacement

Veniamo ora alle tecniche di Image Replacement. Tutte le tecniche di image replacement hanno lo scopo di "nascondere" visivamente una porzione di testo e di mostrare al suo posto un' immagine che viene indicata attraverso la proprietà background dei css.

La Fahrner Image Replacement (FIR)

Credo che la prima tecnica di image replacement usata nel web sia in assoluto la Fahrner Image Replacement sul sito Css Zen Garden. Css Zen Garden, per i pochi che non lo conoscono, è una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS come viene definita sul sito stesso. L' autore di Css Zen Garden ha provveduto un template base con html e css, consentendo ai partecipanti la quasi totale modifica della presentazione attraverso i soli fogli di stile. Per far ciò, si è avvalso della FIR e ne ha consigliato l' uso ai partecipanti. Vediamo di che si tratta, ecco l' html usato proprio nella versione base di CSS Zen Garden:

<div id="pageHeader">
    <h1><span>CSS Zen Garden</span></h1>
</div>

Ed ecco il css:

#pageHeader h1 {
    background: transparent url(/001/h1.gif) no-repeat top left;
    margin-top: 10px;
    width: 219px;
    height: 87px;
    float: left;
    }

#pageHeader h1 span {
    display: none
    }

In sostanza si tratta di attribuire un background all' h1 e di nascondere il testo contenuto all' interno dello span modificando la proprietà display e dichiarando che lo span dell' header non deve essere reso visivamente.

Altri articoli

Altre guide

Altre newsletter