Mètode de reemplaçament d'imatges definitiu (RID)

24/05/05

A Fecklessmind expliquen un mètode de reemplaçament d'un text per una imatge anomenat Definitive Image Replacement (DIR).

Com a gran avantatge s'ha de destacar que degrada correctament en qualsevol dels casos inclòs el cas de que la imatge no es carregui però sí el CSS (cosa que el RIR no té).

Per contra, té la desavantatge que per aconseguir que funcioni en Internet Explorer cal usar un codi específic i no estàndard.

La idea

Generar una caixa desde CSS que contingui la imatge i posicionar-la sobre el text a reemplaçar.

El procés

Partint d'un XHTML tal com:


<h1>Text a reemplaçar</h1>

El CSS a aplicar pels navegadors moderns


h1 {
   margin: 0;
   padding: 0;
   width: 62px;
   height: 50px;
   font-size: 100%;
   overflow: hidden;
}
h1:after {
   display: block;
   content: url("logo.png");
   width: 62px;
   height: 50px;
   margin-top: -25px;
}

Amb la primera regla es determina una amplada i una alçada per la caixa h1 i s'evita que el contingut que sobresurti es vegi mitjançant el overflow: hidden.

Gràcies al pseudo-element :after generem una caixa després de l'h1 i li donem comportament de block (per defecte les caixes generades es comporten com a inline).

Donem les mateixes dimensions que té la caixa h1 —que en la majoria de casos seran les mateixes que les de la imatge— i cridem com a contingut la imatge mitjançant la propietat content.

Amb un marge superior negatiu posicionem la caixa generada sobre l'h1 tapant-lo. El valor del marge negatiu serà la meitat de l'alçada de la caixa.

Les regles CSS per l'Internet Explorer no les han de llegir els altres navegadors, per tant s'haurà d'emprar algun hack. En aquest cas usaré el hack de l'asterisc.


* html h1 {
   background-image: 
   expression(this.runtimeStyle.backgroundImage = 
   "none", this.innerHTML += '<span></span>');
   position: relative;
   z-index: 1;
   overflow: visible;
}
* html h1 span {
   display: block;
   width: 62px;
   height: 50px;
   background: url(logo.png) no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}

La sentència expression permet incloure javascript dins el CSS per l'Internet Explorer. Gràcies a això generem una caixa span.

A la següent regla especifiquem la imatge com a fons i posicionem mitjançant una posició absoluta relativa a l'h1.

Pel cas d'un enllaç s'hauran d'afegir un parell de propietats per aconseguir l'efecte:


<p>
   <a href="URI">enllaç a reemplaçar</a>
</p>


p a {
   margin: 0;
   padding: 0;
   width: 62px;
   height: 50px;
   font-size: 100%;
   overflow: hidden;
}
p a:after {
   display: block;
   content: url("logo.png");
   width: 62px;
   height: 50px;
   margin-top: -25px;
}

* html p a {
   display: block;
   background-image: 
   expression(this.runtimeStyle.backgroundImage = 
   "none", this.innerHTML += '<span></span>');
   position: relative;
   z-index: 1;
   overflow: visible;
}
* html p a span {
   display: block;
   width: 62px;
   height: 50px;
   background: url(logo.png) no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   cursor: pointer;
   cursor: hand;
}

Convertim l'a a block ja que inicialment és inline.

El segon afegit és degut a que com que la caixa generada tapa l'enllaç el cursor en forma de mà deixa de funcionar a l'Explorer. Amb cursor: pointer ho arreglem per la versió 6 però per les versions anteriors caldrà usar el valor propietari d'Internet Explorer hand.

Nota: Per l'Internet Explorer de Mac cal ocultar com a mínim la propietat overflow: hidden tot i que és recomanable que no agafi res del mètode.

Per l'Internet Explorer de Windows és recomanat redefinir l'overflow a visible ja que pot donar algun problema.

Suport dels navegadors
Navegador	Windows	Mac	Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Mozilla Firefox 1.0.4 +	Sí	Sí	Sí
Opera 7.23+	Sí	Sí	?
Safari 1.2	-	Sí	-
Camino 0.84	-	Sí	-
Internet Explorer 6/Win	Sí	-	-
Internet Explorer 5.5/Win	Sí	-	-
Internet Explorer 5.01/Win	Sí	-	-
Internet Explorer 5.2.3/Mac	Sí	-	-

Comentaris

Comentat per xavier gonzalez el 15/06/05

mmm... no se si algú s'ha trobat amb això.
Al validar el css em dona aquest error, per mes que repaso no trobo que pot esser. El background-image el dona com propietat no valida.
Propiedad no válida : background-image Error de análisis sintáctico - this.runtimeStyle.backgroundImage = "none", this.innerHTML += '')
Comentat per are el 16/06/05

Sí, normal, la sentència expression() és un tema propietari de Microsoft i en cap cas estàndard del W3C.
Comentat per Anonymous el 23/06/05

N´hi ha un altre mètode que siga estàndard i es puga utilitzar per a enllaços en caixes amb posició absoluta i que canvien amb :hover?
Comentat per are el 23/06/05

A Mezzoblue en van fer un bon llistat.
Comentat per Frenadolas el 23/06/05

Per a Xavier González:

Jo per a evitar el problema que dius faig dos fulls d'estil: un per a tots els navegadors i un altre per al IE:

estil.css > per a tot els navegadors, inclòs IE
puahexplorer.css > per al IE

I fique en el Head:

<link rel="stylesheet" type="text/css" href="estilo.css" media="all" /> <script type="text/javascript" src="puahexplorer.js"></script>

De manera que carrega "estil.css" i després un arxiu javascript "puahexplorer.js", que: comprova si és explorer i llavors carrega el full "puahexplorer.css".

L'arxiu "puahexplorer.js" amb el següent contingut:

var ua=navigator.userAgent; if( ua.indexOf("MSIE")!=-1 && ua.indexOf("Opera")==-1 ) { document.writeln('<link rel="stylesheet" href="puahexplorer.css" type="text/css">'); }

És una miqueta més complicat que el hack de l’asterisc, però no tens el problema amb la validació ja que només es valida "estil.css"

:)
Comentat per are el 23/06/05

En comptes d'usar el javascript pots aprofitar-te dels "comentaris condicionals" que només interpreta l'Internet Explorer. És a dir:


Em sembla una opció més polida i no has de dependre de cap script
Comentat per a.css, esbudellant estàndards » Tècnica de Cantonades Personalitzades el 03/07/05

[...] [...]
Comentat per Rumoroso el 06/12/05

La solución que yo usaba era una variante de esta. En lugar de introducir mediante ese código un span, lo que introducía era la imagen directamente. Así se podría incluir incluso la etiqueta alt, aumentando la semántica del código. De esta manera no es necesario andar ocultando selectores a los navegadores y el código queda más limpio, al menos eso creo yo (aunque seguimos metiendo código no estandar).
h1 {
padding: 0;
width: 90px; /*ancho de la imagen*/
height: 94px; /*alto de la imagen*/
font-size: 1em;
overflow: hidden;
position: relative;
z-index: 1;
/*lo que sigue es el código para el hermano tonto de los navegadores*/
background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML += '')
}
h1:before{
content: url(imagen.png)
}
h1 img{
position: absolute;
left: 0;
top:0;
z-index: 2
}

Un saludo
Comentat per are el 06/12/05

Home, quan la imatge és purament decorativa no augmentes la semàntica posant una imatge incrustada amb un alt. Més aviat el contrari ja que barrejes capes. (estructura i presentació).
Comentat per are el 06/12/05

A més a més, segons aquesta tècnica la gràcia és tapar el text real amb la imatge :) no tindria sentit duplicar el text amb l'alt
Comentat per a.css, esbudellant estàndards » Mètode de reemplaçament d’imatges amb img (RIi) el 15/01/06

[...] Tot i així jo apostaria per fer un RID amb una imatge com a contingut original ja que funcionaria igual i m’homogenitza les tècniques emprades (i els possibles errors). [...]
Comentat per Minid.net » Blog Archive » Técnica de reemplazo de elementos en CSS el 04/04/07

[...] que podáis leer en catalán o, entenderlo a medias, pueden seguir este ejemplo de técnica de reemplazo de imágenes en la web de [...]
Comentat per Fray el 18/07/07

this work it out
background-image: expression(
(this.type == 'text')? eval("url(images/fnd_boton.gif);"):
(this.type == 'button')? eval("url(images/fnd_boton.gif);"):'none'
);
enjoy

a.css

Menú