Pixy Cover-Up image replacement
Sviluppata da Petr Staníek, sfrutta un tag span aggiuntivo, ma a differenza delle tecniche precedentemente illustrate, vuoto.
Il tag non contiene il testo, ma viene utilizzato per contenere l’immagine di sfondo, che cosė andrà a sovrapporsi al testo, senza doverlo eliminare dalla visualizzazione.
Codice:
Questo è l’effetto:
Image Replacement con la tecnica Pixy Cover.
L’elemento span ha come sfondo l’immagine con cui si vuole rimpiazzare il testo, che in questo modo risulta coperto dall’elemento span stesso, grazie al posizionamento assoluto.
Con questa tecnica, al momento in cui le immagini non sono caricate, il testo è perfettamente visibile e fruibile da parte dell’utente.
La forza di questa tecnica di image replacement sono proprio l’accessibilità e
la compatibilità che è in grado di offrire, oltra a una semplicità concettuale e pratica molto apprezzata.
Unico difetto è lo span vuoto, che tuttavia non altera il valore semantico del documento XHTML,
e non ha una significativa incidenza sul peso complessivo del documento.
Si da un background: transparent perché se l’immagine non viene caricata, non si deve avere nessun colore di sfondo.
Una variante di questa tecnicha è stata presentata da Tom Gilder che si può vedere qui, che inserisce l’elemento span prima del testo, e di conseguenza non è necessario specificare le proprietà di posizionamento top e left.
[ Back to top ]