post icon

Solucionar transparecia de los PNG en Internet Explorer 5.5 y 6

El título del artículo es más que descriptivo sobre que tratará el mismo, y no escribiré nada novedoso, sino bien sobre un eterno problema que nos trae el cancerígeno Internet Explorer en sus versiones 6 y anteriores, aunque solamente es posible solucionarlo en las versiones 5.5 y 6. El problema consiste en que dicho navegador no carga correctamente las imágenes de formato PNG que sean de 32 bits, no así los PNG de 24 bits (no soporta transparencia) y 8 bits (si soporta transparencia y funciona en IE).

La solución base implica hacer una llamada al filtro DirectX AlphaImageLoader de Microsoft, aunque existen varias maneras de implementarla, buscando un poco en la red sobre esto mínimo encontrarán 3 o más métodos de hacer el fix, unas más sencillas que otras. De éstas la que me parece más comoda y sencilla además que no rompe con los estándares de la W3C es un simple script hecho en JS que he visto en la web de Kioskea. En cada página que necesitamos corregir el problema invocamos el script de la siguiente manera:

<!--[if lt IE 7.]>
<script defer="defer" type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Eso hará que sólo se cargue el script en las versiones conrrespondientes de IE y no interfiera con versiones más recientes u otros browsers. El script es como sigue:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) {
    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;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            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 = i - 1
        }
    }
}

Comentarios desde Facebook:

Sin Comentarios aun, puedes tú ser el primero en comentar!

Deja tu Comentario

Responder