Image Replacement Multiplo

La scorsa settimana ho presentato su web-graphics un metodo semplice ed efficace per rimpiazzare graficamente più titoli in una pagina con un'immagine
unica: Single Image Multi Replacement. Presento qui l'articolo in italiano.

Più che una tecnica, quella che presento è un possibile approccio di sviluppo, che personalmente trovo sia in grado di snellire molto il processo di image replacement.

Ecco qui l'esempio che ho preparato, in cui i titoli sono rimpiazzati graficamente, ed ecco l'unica immagine utilizzata.

Il risultato è facilmente ottenibile in tre passi.

1. preparazione dell'immagine;
2. preparazione del markup;
3. definizione del CSS.

Quanto al primo punto, nell'esempio l'immagine

Ora veniamo al codice HTML dell'esempio
è marcato con un h2 id
span


<div id="contenuto">
<h2 id="azienda"><span></span>L'azienda</h2>
<h2 id="servizi"><span></span>I nostri servizi</h2>
<h2 id="dove"><span></span>Dove siamo</h2>
<h2 id="consegna"><span></span>Metodi di consegna</h2>
</div>


Prima di procedere con il CSS dell'esempio div id="contenuto" coprire id cover-up span


div#contenuto h2{position: relative;width: 350px;height:40px;margin: 2em 0 0;
    font: bold small-caps 90% Arial,sans-serif;color: #847FB7}


Vengono definite le dimensioni, i margini e il font con cui si vorrà  presentare il titolo nel caso (seppur raro, ma possibile) in cui l'utente abbia le immagini disabilitate. Una cosa importantissima è dichiarare i titoli position: relative

Gli elementi span


div#contenuto h2 span{position: absolute;
    width: 100%;height: 100%;
    background-image: url(titoli.jpg)}


Non si sono specificate le coordinate del posizionamento assoluto, che comunque restano implicitamente definite, e sarebbero top:0; left:0; background-position


h2#azienda span{background-position: 0 0}
h2#storia span{background-position: 0 -40px}
h2#servizi span{background-position: 0 -80px}
h2#dove span{background-position: 0 -120px}
h2#consegna span{background-position: 0 -160px}


Per ciascuno span individuato dal corrispondente titolo, l'immagine di sfondo viene traslata verso l'alto (per questo l'uso di valori negativi) di un multiplo di 40 pixel.

Il nostro esempio compatibilità 

I vantaggi sono diversi: un'immagine singola pesa sicuramente meno di cinque immagini distinte e richiede una sola richiesta http e soprattutto la tecnica resta accessibile con immagini disabilitate. Lo svantaggio più significativo è un basso livello di personalizzazione: è infatti indicata per siti in cui i titoli grafici difficilmente aumenteranno di numero. Inoltrem l'immagine singola richiede un tempo iniziale di caricamento maggiore rispetto alla prima delle cinque immagini separate. Il mio consiglio è di mantenerla leggera: al massimo 20-30Kb di peso.

Infine è possibile considerare diverse strategie di sviluppo: attribuendo un id
al body
usare per esempio un'immagine per pagina. Per esempio questo potrebbe essere un'estratto
del CSS se volessimo utilizzare un'immagine per la home page e una per la pagina di portfolio:


div#contenuto h2 span{position: absolute;width: 350px;height: 40px}
body#home div#content h2 span{background: url(home.jpg)}
body#portfolio div#content h2 span{background: url(folio.jpg)}


Le restanti regole saranno simili a quelle dell' esempio appena visto, e si riferiranno all'immagine corrispondente alla pagina. Alla prossima.