Como Habilitar Transparencias en pngs de forma automatica para IE6
Bueno, lo prometido es deuda (o algo asi), aqui va una forma de parchar las imagenes que ya tenemos en el sitio en png para que se vean en el apestoso: simplemente agregando un archivo con el siguiente código (extraido de aca):
* html img,
* html .png { behavior: expression((this.runtimeStyle.behavior="none")
&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG"
&& this.src.toLowerCase().indexOf('.png')>-1?
(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='" + this.src + "', sizingMethod='image')", this.src="transparent.gif"):
(this.origBg = this.origBg? this.origBg
:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "',
sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
Si, es medio asqueroso, pero funciona. Para que siga validando:
<!--[if lte IE 6]> link rel="stylesheet" type="text/css" href="png_fix.css" /> <![endif]-->
Y listo!
Todos los tag img con png y transparencia deberian ser automagicamente reemplazados por el AlphaImageLoader.
Además, si hay algun div con fondo png semitransparente, con solo agregarle la clase png entra dentro de los
selectores y arregla.
No se que tan nuevo sera esto en general, pero a mi me sirve bastante mucho.
Cabe aclarar que el codigo usa un gif transparente de 1×1 para parchar la imagen, aca lo tenes
para que no tire errores, hay que colocarlo en el mismo directorio donde está el css. Hay que ponerlo en el “directorio actual” o bien modificar la ruta en el css para que apunte bien al gif, por ejemplo:
this.src="/image/transparent.gif"
Solo faltaria retocar cosas como escalado para algunos fondos o detalles asi, pero seguro se darán cuenta de cómo hacerlo ;)
Popularity: 4% [?]
