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: 2% [?]
Loading...
Ja mira vos, es verdaderamente asqueroso, pero si funca bienvenido sea. Todavia no me puse a analizar el código pero se ve un CSS raro con un JS incluido personalizado para IE
Si es horriblemente horrible, es un css usando expression, lo que solamente anda en ie, y basicamente reemplaza src en los img y background en los .png con lo que carga con AlphaImageLoader.
Feo y chancho, pero lo tengo andando y fue la unica forma de hacer que me muestre bien un div (haciendo el AlphaImageLoader a mano no andaba) y estuve horas peleando con eso, asi que digamos que me vino al pelo.
GROOOSOOO… Ahora bien.. anda todo perfecto, me muestra bien los PNG, pero sobre ellos me aparece el iconito de “imagen no cargada” con la X roja.
En toooodos los png, sean transparentes o no.
Me fije si estaba la ruta correcta, el transparent.gif esta en la misma carpeta que el css, pero no funca… que puede estar pasando?
seguro es una tontera… ilùstrenmè Camaradas!
Interesante pooma, se me paso por alto, por default el script lo busca en el directorio actual, podes cambiar en el script y donde dice “transparent.gif” poner “/img/transparent.gif” y eso deberia funcionar para una instalación de cake en “/”.
Si lo instalaste / lo estas usando en otro directorio, ponele lo que corresponda ahi.
[...] usando mi código para habilitar las transparencias en ie6 y he hecho un par de mejoras. A [...]