Transparencias de archivos PNG en Internet Explorer

Muchos diseñadores se cortan en el uso del formato PNG para sus diseños desanimados por el inconveniente que conlleva la mala interpretación que de éstos hace el Internet Explorer; hoy por hoy, y creo que durante mucho tiempo, el navegador mas utilizado de la red.

Pero lo cierto, es que, si bien gracias a apaños y haciendo uso de los parches y “utilidades” totalmente fuera del Standard, que los propios desarrolladores de Microsoft tienen que irse inventando, existen soluciones a este, en principio, gran problema.

En mi opininión, la mejor solución es la aportada por Bob Osola, en la que integra el uso de Javascript con los Filtros y Conditional Comments propios del Internet Explorer.

El uso de este Script es bien sencillo. Si bien, viene perfectamente explicado en su página, vamos a explicarlo aquí de forma rápida.

Se trata básicamente de hacer llamada al archivo .js llamado en nuestro caso pngfix.js y contiene el código necesario para resolver nuestro problema. Como veis hace uso de los conditional comments del Explorer para controlar que haga llamada al archivo tan solo si se trata de versiones del Explorer inferiores a la 7.

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

El contenido del archivo pngfix.js sería el que 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
}
}
}

Eso es todo. Pues nada… darle las gracias al amigo Bob !!.

Fuentes:

Bob Osola Personal WebSite
Filtros de Internet Explorer
IE’s conditional comments

Anuncios

5 Responses to Transparencias de archivos PNG en Internet Explorer

  1. Angel Camilo Bernal dice:

    Hola, Muchas gracias por este post. Me ayudo a solucionar (En parte) el problemita que tenia con los Png y MSIE. Digo en parte por que sigo teniendo problemas con ello. En MSIE (version 7 y supongo que inferiores) cuando coloco un png como “Background-image” de un elemento (un div en este caso). no me acepta los dos filtros: El AlphaImageLoader para la transparencia normal de la imagen y el Opacity para darle la opacidad al elemento como tal. MSIE omite el opacity y la imagen queda con toda la opacidad apesar de ponerla en (digamos) 10. ¿Que se puede hacer?, Ahh los filtros los combino como lo dice la documentación de MSDN: http://msdn2.microsoft.com/en-us/library/ms532847.aspx. Muchas gracias

  2. Irene dice:

    y dónde pongo el nombre de la imagen?? o el mismo código para todas?? da igual???????? Estoy hasta el moño del explorer!!!!!

  3. osfrix dice:

    Me encato este post. Pero tengo una duda la: imagen o sea el PGN por defecto se posiciona en la esquina superior izquierda como hago para darle otra posicion.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: