Solución fácil al problema del png con alpha en ie6

metacortex · #1 (**permalink**) 11/07/2009, 02:24

Pongan esto en la hoja de estilos y listo:

Código javascript:

Ver original.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)
  );
}

Toda etiqueta con esa clase será procesada. Hoy sólo lo probé con backgrounds, que es precisamente la parte en que falla la mayoría de los scripts, quienes funcionan bien con la etiqueta <img> pero echan el tiro con los fondos CSS.

Otro detalle importante es el eterno problemita (y ese sí parece irremediable) con los enlaces que se desactivan dentro de una capa o elemento con la función activada (en este caso mediante la clase). Mi solución fue crear una capa independiente dentro del contenedor y posicionarla absoluta, dejando lo demás al z-index en caso de sobreponerse al contenido.

Bueno ésto es lo mejor que he conseguido hasta ahora. Lo encontré aquí:

http://www.komodomedia.com/blog/2007...ge-fix-for-ie/

Por supuesto la clase .png puede ser suplantada por cualquier otra.

dART · #2 (**permalink**) 11/07/2009, 05:24

Hola,

Dudo mucho que eso cumpla los estándares de CSS.. de todas formas, hay muchos recursos para hacer que Internet Explorer soporte las imágenes PNG.
http://www.anieto2k.com/2006/08/28/p...ciones-varias/

gabrielflowers · #3 (**permalink**) 11/07/2009, 10:02

metacortex: tu solucion no funciona, lo probe con imagenes png y nada:

Código HTML:

<html>
<head>
<title>Pagina nueva 1</title>
<style>

.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)
  );
}

</style>
</head>
<body>

<img src="world3.png" width="50%" height="50%" class="png">
</body>

</html>

metacortex · #4 (**permalink**) 11/07/2009, 12:12

Cita:

Iniciado por dART

Hola,

Dudo mucho que eso cumpla los estándares de CSS..

Por eso existe algo llamado "condicionales" y "hoja de estilo para ie".

Cita:

Iniciado por dART

de todas formas, hay muchos recursos para hacer que Internet Explorer soporte las imágenes PNG.
http://www.anieto2k.com/2006/08/28/p...ciones-varias/

Excelente, no solo esas sino más aún. Aquí sólo se está exponiendo una más, que por cierto me pareció excesivamente fácil de implementar.

Cita:

Iniciado por gabrielflowers

metacortex: tu solucion no funciona, lo probe con imagenes png y nada:

Código HTML:

<html>
<head>
<title>Pagina nueva 1</title>
<style>

.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)
  );
}

</style>
</head>
<body>

<img src="world3.png" width="50%" height="50%" class="png">
</body>

</html>

http://www.darioferrer.com/varios/prueba-png/