Skip to: Site menu | Main content

LIR - Leahy/Langridge Image Replacement

Seamus Leahy e Stuart Langridge hanno sviluppato, separatamente ma in contemporanea un metodo di sostituzione differente, che non utilizza l’elemento span aggiuntivo.

Codice:


Questo è l’effetto:

Image Replacement con la tecnica Leahy/Langridge.

Questa tecnica non richede l’elemento span aggiuntivo perché sfrutta il padding per eliminare il testo.
In questo caso viene sfruttato il Box Model: si applica l’immagine di sfondo e si definiscono le dimensioni, assegnando un padding con valore pari alla larghezza o altezza dell’immagine (si può usare padding-left o padding-top, che è la tecnica orignale, ma con problemi di compatibilità), il testo si sposterà a lato dell’immagine.

Per eliminare gli elementi in eccesso viene impostata una larghezza nulla per i contenuti, e con la proprietà overflow: hidden, si vanno a nascondere le parti in eccesso.

Questa tecnica però fallisce con le versioni di IE precendenti alla 6, é necessario inserire un codice riservato a IE. (Apri questa finestra per vederlo)