22 febrero, 2008

Problema de transparencias de PNGs en IE hasta v6

Al abrir este blog en el nunca bien ponderado Internet Explorer 6 (en adelante, IE6) he descubierto que estaba mostrando las imágenes PNG con fondo sólido cuando debería estar mostrando transparencias.

Después de buscar un poco, encuentro que es un problema exclusivo de IE hasta su versión 6.

La solución que encontré es a través de un script que utiliza el filtro AlphaImageLoader, mostrando los PNGs con sus transparencias correctamente.

Instrucciones:
1 - Copia esta sección de código en un archivo llamado png_loader.js

function PNG_loader() {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle += "float:left;";
if (img.align == "right") imgStyle += "float:right;";
if (img.parentElement.href) imgStyle += "cursor:hand;";
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i--;
}
}
}
window.attachEvent("onload", PNG_loader);

2 - Copia el siguiente código en la cabecera (entre <head> y </head>) de aquellos archivos web que vayan a mostrar imágenes PNG con transparencia:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="./png_loader.js"></script>
<![endif]-->

3 - Guardar, recargar, y listo.

El único punto en contra que le encontré a esta solución es que para ejecutar el script deben haberse cargado todas las imágenes anteriormente, por lo que si alguna de ellas tarda en cargar, mientras tanto llas demás se verán sin las preciadas transparencias.
Por esto mismo, si la carga de alguna de las imágenes a visualizar fallara, el script no se ejecutaría nunca.

Por otro lado, teniendo en cuenta que los usuarios de IE6 o inferiores son cada vez menos, la gravedad de esta falla irá disminuyendo gradualmente.

Via: MijT, Foros Perú -> Bob Osola

No hay comentarios: