El mètode FIR per substituir un text per una imatge via CSS explicat originalment a stop design s'ha demostrat que no és accessible per lectors de pantalla tipus JAWS ja que aquests no llegeixen el text que estigui ocult a través de l'atribut display.
Dave Shea fa un recull de tècniques RIR.
De totes les que exposa, la que m'ha agradat més és el mètode Leahy/Langridge perquè no necessita afegir cap element extra, d'aquesta manera puc garantir la semà ntica.
mètode Leahy/Langridge
<h1>
Reemplaçament d'Imatges Revisat
</h1>
h1 {
height: 0px !important;
overflow: hidden;
background-image: url(../images/logo_positiu.png);
background-repeat: no-repeat;
padding: 60px 0 0 0;
margin: 0;
height /**/: 30px;
}
Com a exemple, el logotip d'aquesta web.
Nota1: S'ha de tenir present que l'element tractat per fer el RIR ha de ser una caixa de bloc. Si no ho fós (el cas d'un enllaç) se l'ha de convertir amb un display: block;
Nota2:La tècnica RIR presenta un problema quan no es carreguen les imatges però si que es carrega el CSS.
| Navegador | Windows | Mac | Linux |
|---|---|---|---|
| Si ho proveu en algun navegador que no estigui aquà llistat us agrairia que m'informessiu del resultat | |||
| Mozilla Firefox 0.8 | Si | Si | Si |
| Mozilla 1.6 | Si | Si | Si |
| Opera 7.23 | Si | ? | ? |
| Safari 1.2 | - | Si | - |
| Camino 0.7 | - | Si | - |
| Konqueror 3.2 | - | - | Si |
| Konqueror 3.1 | - | - | No |
| Internet Explorer 6 | Si | - | - |
| Internet Explorer 5.5 | Si | - | - |
| Internet Explorer 5.01 | Si | - | - |
Comentaris
Comentat per Miquel el 11/08/04
Tot mirant el recull al que enllaces, he vist els mètodes Phark (i el revisat), que m'han funcionat molt bé.
T'ho comento, perquè, en el meu cas (potser he fet quelcom malament?) quan tenia la lÃnia
height: 0px !important;només funcionava bé l'efecte a Firefox, i a l'Internet Explorer 6 em mostrava el text. Quan treia la lÃnia anterior, l'Interner Explorer m'ho feia bé, però el FireFox no. Per això he provat el mètode Phark revisat, i amb el
background-repeat: no-repeat;m'ha funcionat a la primera.Com és que no hi ha cap comentari? Aquest article m'ha semblat molt interessant:D
Comentat per are el 11/08/04
També està bé el mètode Phark revisat.
Això que no et funcioni amb Internet Explorer 6 pot ser per diversos motius. Quin DOCTYPE utilitzes? és important per saber el comportament que tindrà el navegador.
Jo utilitzant XHTML 1.0 Strict o XHTML 1.1 m'ha funcionat sempre (utilitzo el pròleg XML en ambdos casos)
mmm, això dels comentaris és curiós, ves a saber quin factor fà que n'hi hagi :)
Comentat per Frenadolas el 23/06/05
Quin és el mètode Phark? on està ?
I per què els arteriscos de height /**/: 30px;?
El métode RID és més modern però no és estandard, quin mètode standard és millor?
I per a enllaços que canvien amb un :hover?
Comentat per are el 23/06/05
El mètode Phark és el que es basa en ocultar el text amb la propietat
text-indent. Per exemple:h1 {
text-indent: -100em;
overflow: hidden;
background-image: url(../images/logo_positiu.png);
background-repeat: no-repeat;
margin: 0;
height: 60px;
}
D'aquesta manera el text queda desplaçat fora de la caixa i ocult grà cies a la propietat
overflow.El mètode RID és està ndard exepte la part de codi destinada a l'Internet Explorer ja que no entén els pseudo-elements
:afteri:before.Actualment jo uso el mètode Phark ja que és el que menys hacks em demana.
Els asteriscos: Això és un comentari buit colocat en un lloc incorrecte per tal de que sigui una sentència invà lida i cap navegador la llegeixi exepte els que tenen el bug. En aquest cas l'Internet Explorer 5.01
Per als enllaços amb
:hoverles tècniques que s'han esmentat al llarg d'aquest post i dels comentaris són apropiades.Comentat per a.css, esbudellant està ndards » Mètode de reemplaçament d’imatges amb img (RIi) el 15/01/06
[...] Comentaris recents Mètode de reemplaç... [...]