xavier sarrate

Internet Explorer (al menos hasta su versión 6) no acaba de trababajar correctamente con las imágenes PNG transparentes. Algunos scripts permiten, aplicando filtros específicos de este navegador, visualizar estas transparencias. El problema es que al mostrar la imagen, aparece un cuadro gris de fondo que desaparece al instante, pero provoca un efecto no deseado.

Para evitarlo, podemos ocultar nuestra imagen en un primer momento (mediante el atributo display en el estilo) y mostrarla una vez cargada la página. El código de nuestra imagen podría ser:


<img src="nombre.png" width="XXXpx" height="YYYpx" style="display:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='nombre.png', sizingMethod=scale );"/>


Los estilos podrían ubicarse en un fichero CSS externo. Sólo faltaría lanzar este script en el evento onload del documento:


function iePNG(){
  var imageExtension="PNG";
  var voidImagePath="img/void.png";
  var defaultDisplay="block";
  for(var i=0; i<document .images.length; i++){
    var image = document.images[i];
    var imageName = img.src.toUpperCase();
    if (imageName.substring( imageName.length - imageExtension.length, imageName.length ) == imageExtension){
      if(document.body.filters) image.src = voidImagePath;
      image.style.display=defaultDisplay;
    }
  }
}


La variable voidImagePath apuntará a una imagen de un píxel por un píxel transparente que se utilizará para aplicar el filtro en Internet Explorer. En este caso, el bucle acepta todas las imágenes con extensión PNG y modifica el atributo display. Si fuera necesario, se podría realizar otro tipo de filtro (para imágenes generadas dinámicamente por ejemplo, sin extensión PNG).