Explorer versus PNG

Brevemente, el explorer es un asco, y para hacer que los png tengan transparencia hay que utilizar una caracteristica no estandar que es style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='scale');" totalmente fuera de los estandares y de toda la logica.

Explicación del metodo micro$oft ™, cuidado que vienen curvas:

Parece ser que no hubo forma de meter el soporte del canal alfa de los png en el navegador, asi que para soportarlo se hace una llamada externa a un filtro DirectX que es el que finalmente si que muestra la imagen. Esto no debe extrañar a nadie, ya que hasta la version 5.5b1 los frames eran implementados como instancias separadas de explorer, con lo cual por ejemplo la propiedad z-index no era soportada, ya que siempre estaba en el nivel 0, esto provocaba que en paginas con muchos frames hubiese una sobrecarga del sistema dado que existia una copia de explorer activa para cada frame. Curioso, programación eficiente ante todo.

Eso si, ahora cuando lo implementan como el resto del mundo, dicen que es mucho mas eficiente (obviamente) y mejor de esta forma (son unos fieras).

Vamos a ver, si tu puedes poner una imagen png en un tag <img src="imagen.png"> a santo de que ahora resulta que para que la imagen salga con el canal alfa correcto tienes que hacer la ñapa siguiente:

<img SRC="tux-small2.png" ALT="Tux" height=359 width=315 align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='scale');" >
<script language="JavaScript" type="text/javascript">
//<!--
var agt=navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

if ( is_ie )
{
        tuximg.src="blank.gif";
}
//-->
</script>

1. Crear un archivo llamado pngbehavior.htc con el siguiente contenido:

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "/blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>

2. Y usarlo de la siguiente forma:

<img SRC="tux-small2.png" ALT="Tux" height=180 width=158 align=BOTTOM title="Tux, el pinguino mascota (pngbehaviour)" style="behavior: url('/pngbehavior.htc');">

o

<style type="text/css">
        img { behavior: url("/pngbehavior.htc"); }
</style>
	
<img SRC="tux-small2.png" ALT="Tux" height=180 width=158 align=BOTTOM title="Tux, el pinguino mascota (pngbehaviour)">

Nota: este ultimo metodo de evaluar todos los tag img es considerablemente más pesado y muchísimo más cargante para la máquina, te recomiendo aplicar el estilo solo a las imagenes png que lo necesiten.

3. Solucionar el siguiente problema que haya creado Microsoft.

Aquí hay cuatro imagenes, la primera es solo el tag img, normal de toda la vida, la segunda es el metodo microsoft, esto es, marciano, retorcido e incompatible con todo el mundo, la tercera es la unión de ambas usando una pizca de javascript, y finalmente la cuarta es el metodo del behavior css.

¡Otra actualización! Simone Gianni envia una solucion que requiere menos trabajo todavia, aunque sigue lejos de ser como deberia ser, el truco es sustituir el metodo de "retamañado" (o como se diga en castellano) por el de "image" en lugar de "scale" de tal forma:
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='image');" >
Y ya no hace falta ni poner el alto y el ancho, aunque es recomendable porque se ayuda al navegador a pintar la pagina, al tener antes la informacion del tamaño de las imagenes sin tener que descargarlas.

¡Otra actualización más! Greg Thomas envia un email que da una nueva vuelta de tuerca a esta historia. Comenta que desde alguna actualizacion de Microsoft tiene que cambiar:
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='image');" >
por:
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='tux-small2.png');" >
Y tambien comenta que la direccion http://www.koivi.com/ie-png-transparency/ tiene algo interesante respecto a este tema (pista: es un php que cambia la pagina por ti dependiendo del navegador que la visita).

Documentación diversa acerca del asunto, que alguien les diga a los muchachos de micro$oft que lean un poco, que desde Octubre de 1996 ha habido tiempo más que suficiente:
Estandar PNG aprobado por el w3c
Página home del formato PNG
Test del soporte PNG de los navegadores
Documentación de microsoft del filtro AlphaImageLoader

Información duramente recopilada por Jorge Nerín, si quieres puedes ponerte en contacto.

Vuelve a casa.