Image Replacement

Cos’è? Tramite le tecniche di Image Replacement è possibile sostituire un qualsiasi contenuto testuale con un immagine contenente il medesimo […]
Image Replacement

Cos’è?

Tramite le tecniche di Image Replacement è possibile sostituire un qualsiasi contenuto testuale con un immagine contenente il medesimo testo in formato grafico.

Perchè usarle?

Un sito accessibile è un sito che può essere consultato da chiunque, ovunque e su qualsiasi browser, compresi gli screen-reader. E’ giusto e corretto garantire una lettura di tutte quelle parti che diversamente non verrebbero interpretate perche manca “l’alternativa” testuale di quel contenuto grafico. Inserire immagini e elementi grafici per abbellire i propri siti web, si!, ma seguendo le giuste procedure e tecniche.

Vuoi mettere in secondo piano anche l’aspetto SEO? Non credo. Google non legge le immagini, il suo algoritmo non è in grado di interpretare cio che graficamente vuoi comunicare; lasciare il contenuto testuale intatto aiuta google a indicizzare meglio quel contenuto e aiuta te a scalare le SERP.

Non dimentichiamoci infine che il vero web designer è colui che distinuge sempre i contenuti dalla formattazione. Inserire un immagine ad esempio per sostituire un titolo o un paragrafo, direttamente con il tag img all’interno della pagina, inficia la portabilità della pagina stessa. Quella stessa pagina vista su iphone potrebbe non rendere allo stesso modo che vista su un monitor da pc. E’ piu giusto quindi inserire nel markup, il testo relativo al titolo o a qualsivoglia contenuto e tramite il css far scomparire quel testo e inserire al suo posto un background. Quello stesso backgorund potrà cambiare “n” volte in “n” situazioni diverse ma il contenuto resterà sempre lo stesso.

Quale usare?

Sono state sviluppate svariate tecniche di sostituzione e tutte si basano su due fondamentali passaggi. Utilizzo di un immagine come sfondo di un elemento html ed eliminazione del relativo testo. Questo che segue è un elenco delle tecniche di image replacement, analizzeremo pregi e difetti di ognuna di loro e le utilizzeremo per sostituire il titolo h1 del blog.

  1. FIR
  2. LIR
  3. PIR
  4. MIR
  5. Pixy Cover-Up Span
  6. BIR

F.I.R. – Fahrner image replacement

Applichiamo questa tecnica al titolo h1 del nostro blog. Allo stesso applichiamo un’immagine di sfondo. Rendiamo “block” l’ancora e impostiamo altezza e larghezza pari al logo, cosi da rendere cliccabile l’intera superfice dello stesso e includiamo il testo all’interno di uno span cosi da renderlo invisibile. L’inclusione all’interno del tag span è necessaria altrimenti non si potrebbe applicare la propietà display:none al solo contenuto testuale. Questa tecnica ha il difetto di utilizzare la dichiarazione display:none che se interpretata dagli screen reader induce il programma a non leggere il contenuto rendendolo cosi inaccessibile agli utenti. Inoltre se l’immagine non venisse caricata per qualche motivo, non verrebbe visualizzata nemmeno l’alternativa testuale.

<h1><a href="index.php"><span>Laboratorio css</span></a></h1>
h1 {
    background:url("logo.jpg") no-repeat left top;
    width:300px;
    height:100px;
}

h1 a {
    display:block;
    width:300px;
    height:100px;
}

h1 a span {
    display:none;
}

L.I.R. – Leahy/Langridge Image Replacement

Questa tecnica non richiede l’inserimento del tag span aggiuntivo poichè si serve del padding per nascondere il testo. Il Markup sarà il seguente:

<h1><a href="index.php">Laboratorio CSS</a></h1>

Si imposta l’altezza del tag h1 affiche contenga esattamente l’immagine e si applica un padding-left pari alla larghezza dell’immagine, per far si che il testo venga nasconìsto impostiamo una larghezza pari a 0 e la proprietà overflow hidden. Assegnando un valore nullo alla larghezza e tagliando il box con la proprietà overflow sarà visibile solo la porzione con l’immagine di sfondo. Ricordiamo che tutto cio è possibile poiche la larghezza complessiva di un box è data dalla somma delle sette proprietà orizzontali (come gia ampiamente spiegato in un precedente articolo). Proprio per questo motivo, questa tecnica non funziona con le versioni 5.x di IE a causa della cattiva interpretazione del box-model. Bisognerà quindi applicare un css dedicato per IE5.x in cui viene dichiarata la width dell’h1 pari al valore del padding-left.

P.I.R. – Phark Image Replacement

Questa tecnica, come la precedente non necessita di tag aggiuntivi per l’elminazione del testo.

<h1><a href="index.php">Laboratorio CSS</a></h1>

Si basa sulla proprietà text-indent e sull’attribuzione di un valore negativo molto elevato. Se però il testo risulta essere eccedente in altezza rispetto all’immagine, IE aumenterà il valore di height fino a contenere il testo per intero. Il problema potrebbe essere facilmente risolto impostando il font-size ad un valore molto piccolo se non fosse che IE5 sposta verso sinistra non soltanto il testo ma l’intero h1. Per ovviare a questo basta rendere flottante o posizionato in maniera assoluta il tag h1. Riepiloghiamo il tutto:

h1 a {
    background:url("logo.jpg") no-repeat left top;
    width:300px;
    height:100px;
    text-indent:-99999px;
    display:block;
}

/*Per ie5*/
h1 a{
    position:absolute;
    top:0;
    left:0;
}

M.I.R. – Malarkey Image Replacement

Questa tecnica come le precedenti due, inventata da Andy Clarke, non utilizza tag aggiuntivi ma sfrutta la proprietà letter-spacing. Assegnando un valore negativo le parole collassano e il testo scompare. Funziona su tutti i browser tranne che su Opera. Per ovviare al problema si può unire questa tecnica alla Phark che funziona su tutti i browser tranne che sulla versione 5 di IE. Il seguente codice chiarirà meglio le idee:

/*MIR: intepretata da tutti tranne da opera*/
h1 a {
    background:url("logo.jpg") no-repeat left top;
    width:300px;
    height:100px;
    letter-spacing:-500em;
}

/* PIR: Viene utilizzato il <strong>selettore discendente</strong> cosi tutti i browser tranne le versioni 6 e precedenti di IE saranno in grado di leggere questa stringa di codice.*/
html>body{
    text-indent:-99999px;
}

Quindi riepilogando, su opera non ha effetto la MIR ma agisce la PIR. IE6 e precedenti per windows utilizzano solo la MIR mentre tutti gli altri browser sfruttano tutte e due le tecniche.

Pixy Cover-Up Span

Questra tecnica sfrutta un tag span vuoto aggiuntivo che contiene l’immagine di sfondo da sovrapporre al testo che cosi passa in secondo piano e viene nascosto. Il tag h1 ha una position relative in modo tale da posizionare in assoluto il tag span che andrà a coprire l’intera superficie,cosi se l’immagine non venisse caricata, la sua alternativa testuale comparirebbe al suo posto garantendo cosi un’accessibilità al 100%. I punti di forza sono la compatibilità, la semplicità e l’accessibilità. L’unico neo è l’utilizzo di un tag span aggiuntivo vuoto che potrebbe inficiare la pulizia e la sematica del codice. Ricordiamo però che il tag span non è un elemento sematico per cui il suo utilizzo non altera il valore semantico del documento ed è irrilevante ai fini della frizione della pagina stessa.

<h1><a href="index.php">Laboratorio css<span></span></a></h1>
h1 a {
    display:block;
    position:relative;
    width:300px;
    height:100px;
    cursor:pointer;
}

h1 a span {
    background:url("logo.jpg") no-repeat left top;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

B.I.R. – Bob Image Replacement

Quest’ultima tecnica ricalca la precedente con la differenza che il tag span non è vuoto ma è riempito dal testo da sostituire. La tecnica prevede l’attribuzione di uno z-index negativo allo span cosi da renderlo invisibile. Per fare ciò bisogna specificare uno z-index positivo per il body. Inoltre l’unico vantaggio rispetto alla precedente tecnica è che il tag span in questo caso non è vuoto! Ricordiamoci in questo caso e nel precedente, di inserire la proprietà overflow hidden per evitare che font, con una font-size molto elevata possano far eccedere in larghezza o in altezza il testo da sostituire.

<h1><a href="index.php"><span>Laboratorio css</span></a></h1>
body{
    z-index:1;
    position:relative;
}
h1{
    overflow:hidden
}

h1 a {
    width:300px;
    height:100px;
    background:url("logo.jpg") no-repeat left top;
    text-decoration:none;
}

h1 a span {
    z-index:-1;
    position:relative;
}
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github