BIR - Bob image replacement
Fa uso di un tag span aggiuntivo, e sfrutta un principio simile al PIR, però il tag span non è vuoto, ma contiene il testo da sostituire, e al contrario della PIR, l’immagine da applicare viene assegnata come sfondo dell’elemento div.
Codice:
Questo è l’effetto:
Image Replacement con la tecnica Bob.
Con la proprietà z-index si possono definire le posizioni riguardanti la profondità, cioè ciò che sta in primo piano, cosa in secondo e così via.
Assegnando allo span un valore negativo (z-index:-1),il testo è posto dietro, ma affinchè funzioni occorre attribuire un valore positivo (z-index:1) all’elemento body.
Anche questa tecnica permette la fruibilità del testo nel caso in cui le immagini non siano caricate, e in più il tag span non è vuoto ed è rimpiazzabile da altri eventuali elementi.
La BIR non funziona con Konqueror.
Le ultime due tecniche illustrate sono quelle più attente all’accessibilità, ma tale soluzione non tiene conto della possibilità del testo di cambiare dimensione, che ingrandendosi, sarebbe visibile.
Per evitare che il testo si espanda oltre la dimensione dell’immagine è possibile assegnare all’elemento che racchiude il testo (poiché in genere si sostituiscono header è molto probabile che sia un h1) la dichiarazione overflow:hidden.
Occorre comunque fare attenzione, perchè quando l’immagine non viene caricata il testo risulterà parzialmente leggibile.
In base alle dimensioni dell’immagine, si può comunque trovare un impostazione per la dimensione del carattere che permetta forti ingrandimenti da parte dell’utente (con questa dichiarazione BIR non funziona con Mozilla).
[ Back to top ]