Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Solución fácil al problema del png con alpha en ie6 en el foro de CSS en Foros del Web. Pongan esto en la hoja de estilos y listo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código javascript : Ver original . png {   behavior : expression ( ( ...
  #1 (permalink)  
Antiguo 11/07/2009, 03:24
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Solución fácil al problema del png con alpha en ie6

Pongan esto en la hoja de estilos y listo:

Código javascript:
Ver original
  1. .png {
  2.   behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
  3.   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  4.   this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  5.   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  6.   this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
  7.   );
  8. }
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.
  #2 (permalink)  
Antiguo 11/07/2009, 06:24
Avatar de dART  
Fecha de Ingreso: enero-2009
Ubicación: Madrid
Mensajes: 246
Antigüedad: 8 años, 10 meses
Puntos: 7
Respuesta: Solución fácil al problema del png con alpha en ie6

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/
  #3 (permalink)  
Antiguo 11/07/2009, 11:02
Avatar de gabrielflowers  
Fecha de Ingreso: julio-2007
Ubicación: Santa Cruz de la Sierra
Mensajes: 187
Antigüedad: 10 años, 5 meses
Puntos: 3
Respuesta: Solución fácil al problema del png con alpha en ie6

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> 
__________________
"puedo detenerme, pero no retroceder, tengo que avanzar..."
  #4 (permalink)  
Antiguo 11/07/2009, 13:12
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Solución fácil al problema del png con alpha en ie6

Cita:
Iniciado por dART Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:27.