IE6 y pngs

[Nietzsche]

Hola, estoy desarrollando una web y esta se ve correctamente en IE7 y en firefox pero extrañamente en IE6 las imágenes png que incluyo no tienen fondo transparente como era de esperar, sino que se les añade un fondo azulón. ¿Alguien sabe el motivo?

Lo podéis ver en

http://www.verticedigital.com/CVT

Saludos!

[Snd234]

IE6 no tiene soporte para transparencia en imagenes PNG. Solucion? aplicar algunos hack.

Si la imagen es un fondo asignado en la CSS, tendras que poner el siguiente codigo en la clase o id correspondiente

Código:

.nombre_clase {
background-image: url(”imagen.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’direccion_absoluta/imagen.png’);
}

Fijate que la ultima direccion, tiene que ser absoluta, osea la direccion completa de donde se encuentra la imagen

Por el contrario, si la imagen esta "puesta" en la pagina, tendrias que importar el siguiente codigo JS

Código:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   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
         }
      }
   }    
}

window.attachEvent("onload", correctPNG);

Una vez que se carge toda la pagina, este codigo buscara todas las imagenes y mostrara las transperencias segun corresponda.

[Nietzsche]

Hola,
Muchas gracias por tu contestacion Snd234, pero ahora me surgen 2 problemas.

El primero es que hasta que la página se ha cargado siguen apareciendo las imágenes con el fondo. ¿Cómo hago para que no se muestren hasta que estén ya transparentes?

Lo segundo es que una de esas imágenes tenía efectos de sustitución al poner encima el ratón y al aplicar el Javascript que me facilitaste ya no lo hace. Me dice que "img.name" es nulo.

He intentado añadir el siguiente código por si se perdia el valor del atributo name al ejecutar tu funcion:

Código HTML:

var imgNombre = (img.name) ? "name='" + img.name + "' " : ""

var strNewHTML = "<span " + imgID + imgNombre + imgClass + imgTitle

pero sigue sin funcionar....

Un saludo!

[Yaraher]

Usa la biblioteca de código IE7.js. Corrije ese y varios otros problemas de IE6 (como selectores de CSS2, CSS3, y muchos bugs más).

Simplemente búscalo en Google y adjúntalo a tu documento XHTML. Las imágenes que deben ser transparentes deberán tener el sufijo "-trans.png".

Suerte!

[Nietzsche]

Muchas gracias, voy a probarlo y te cuento