Una buona tecnica di Image Replacement

Pubblicato il 14/05/2008 da Andrea Barghigiani in accessibilità, css, design, esempi, grafica

FONTE: LifeStyle Web

In questo articolo, vi presenterò una tecnica IMR (IMage Replacement): ve ne indicherò anche altre, ma quella che spiegherò è la mia preferita. :D

Prima di tutto cerchiamo di spiegare cosa significa utilizzare una tecnica di image replacement: sicuramente vi sarà capitato per lavoro, o per qualche esperimento, di voler inserire un titolo elaborato a livello grafico, magari con un pò di ombreggiatura e con dei font che sicuramente non sono presenti su tutti i computer.

Titolo di esempio

Certamente un font del genere non sarà presente su tutti i computer, molto probabilmente in quelli di qualche grafico, ma quasi certamente non ci sarà sul PC di un utente medio. Cosa fareste voi a questo punto? Inserireste il tag <img />, magari aggiungendo al suo interno l’attributo alt=”LifeStyle Web”, pensando di aumentare l’accessibilità del sito web?

Se procedete in questo modo, certamente avrete scritto del codice xHTML corretto, con l’aggiunta del tag alt, ma avrete perso tutti i benefici che un titolo può dare inserito in una pagina web. Come ben sapete, da quando é stato introdotto il metalinguaggio xHTML i suoi tag hanno avuto in aggiunta un valore semantico; quindi se utilizziamo un’immagine al posto di un titolo, non stiamo utilizzando il tag in modo corretto.C’é da dire, inoltre, che ciò non aiuta il posizionamento sui motori di ricerca!

Infatti, ad oggi, non ci sono motori di ricerca in grado di leggere il testo presente nelle immagini: queste vengono semplicemente ignorate o, nel caso migliore, indicizzate soltanto come immagini.

Ma il titolo di una pagina é una parte essenziale della stessa, perchè quindi non utilizzarlo in modo che venga visto con la giusta importanza dai motori di ricerca donandogli un aspetto grafico più gradevole?

Ecco qui che viene in nostro aiuto la tecnica di image replacement!

Prendendo spunto da un articolo di Html.it, vi presento quella che preferisco: la Cover-up span.

Il markup necessario alla realizzazione di questa tecnica è:

<h2 id="titolo"><span></span>LifeStyle Web</h2>

Come potete vedere è un codice leggermente insolito, infatti presenta sia un id necessario per identificare univocamente il nostro titolo, che uno span vuoto che utilizzeremo per sovrapporre l’immagine al testo del titolo.
Per fare questo avremmo bisogno di posizionare il nostro titolo come position: relative e con le dimensioni dell’immagine che andremmo ad utilizzare, in modo da poter posizionare il nostro span in modo assoluto, con la capacità di sovrapporsi al titolo, impostando le dimensioni al 100% e avrà come background l’immagine che sostituirà il titolo.

Andiamo a vedere un pò di CSS:

h2#titolo{
position: relative;
width: 440px;
height: 77px;
font: bold 12px Arial,sans-serif;
color: #000;
}
h2#titolo span{
position: absolute;
width: 100%;
height: 100%;
background:url(titolo.png);
}

Ecco a voi il segreto di questa tecnica! Per essere precisi, ho impostato al titolo anche un font più piccolo, in modo tale che rimanga all’interno dell’immagine, e un colore uguale a quello utilizzato nell’immagine, in modo che se un utente visualizza il sito con le immagini disabilitate sarà sempre in grado di leggere qualcosa, importantissimo per chi utilizza un browser testuale!

Potete tranquillanemte andare sul sito di html.it e controllare l’articolo che vi avevo consigliato precedentemente, ma io preferisco questa tecnica perchè la ritengo la più compatibile e semplice da utilizzare; in fin dei conti questa tecnica vi porta ad utilizare delle tecniche che molto probabilmente conoscete di già come il posizionamento assoluto e quello relativo.

Le altre tecniche di image replacement che troverete si basano sulla conoscenza dello z-index e sul mascherare il titolo con lo sfondo dell’immagine, personalmente non le trovo molto comode, ma sentitevi pure liberi di comunicarmi quale preferite e soprattutto il perchè!

Commenti

2 commenti per “Una buona tecnica di Image Replacement”

  1. diggita.it il 14/05/2008 19:22

    Una buona tecnica di Image Replacement…

    Prima di tutto cerchiamo di spiegare cosa significa utilizzare una tecnica di image replacement: sicuramente vi sarà capitato per lavoro, o per qualche esperimento, di voler inserire un titolo elaborato a livello grafico, magari con un pò di ombreggi…

  2. upnews.it il 14/05/2008 19:22

    Una buona tecnica di Image Replacement…

    Prima di tutto cerchiamo di spiegare cosa significa utilizzare una tecnica di image replacement: sicuramente vi sarà capitato per lavoro, o per qualche esperimento, di voler inserire un titolo elaborato a livello grafico, magari con un pò di ombreggi…

Commenta il post