Foros del Web » Creando para Internet » Diseño web »

IE6 y pngs

Estas en el tema de IE6 y pngs en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2007, 18:46
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
IE6 y pngs

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!
__________________
Salud y libertad
  #2 (permalink)  
Antiguo 04/07/2007, 19:35
Avatar de Snd234  
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 413
Antigüedad: 10 años, 6 meses
Puntos: 2
Re: IE6 y pngs

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.
  #3 (permalink)  
Antiguo 06/07/2007, 08:08
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Re: IE6 y pngs

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!
__________________
Salud y libertad
  #4 (permalink)  
Antiguo 06/07/2007, 08:39
Avatar de Yaraher  
Fecha de Ingreso: abril-2007
Ubicación: Lima, Perú
Mensajes: 262
Antigüedad: 10 años, 7 meses
Puntos: 9
Re: IE6 y pngs

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!
  #5 (permalink)  
Antiguo 06/07/2007, 13:25
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Re: IE6 y pngs

Muchas gracias, voy a probarlo y te cuento
__________________
Salud y libertad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:53.