problema png (no es el de la transaparencia)

mreyesb · #1 (**permalink**) 28/08/2007, 16:41

hola, me encuentro realizando un sitio web y me tope con un problema que nunca me habia tocado... y esta vez el culpable es IE7 que se supone ya tiene arreglado esos dramas..
les cuento

tengo mi pagina en un contenedor que tiene un fondo con sombra (la sombra se proyectaria en el body ese es el efecto..) para evitarme el problema de la transparencia y no usar el hack para ie6 pinte el fondo del png del mismo color que le di de fondo al body (un plomo claro) y fusione las capas por lo que me resulto un png sin trandparencias.. lo voep en forefox y se funde perfectamente con el fondo y se ve bien, pero en IE7 le cambia el color al png solo en la parte de la sombra a mas oscuro por lo que quedan unas barra re feas entre el fondo del body y el contenedor...
aca unas fotos

firefox lo ve asi: ACHETETEPE : // img267.imageshack.us/img267/6400/firefoxru2.jpg

IE7 lo ve asi: ACHETETEPE : // img204.imageshack.us/img204/8207/ieea9.jpg

Les agradeceria la ayuda que me esta volviendo loko este problema y tengo que presentar esto el viernes (parte de mi tesis)

saludos

pzin · #2 (**permalink**) 28/08/2007, 16:43

Yo tuve el mismo, si me dejas miro un momento a ver cómo fue que lo solucioné. Aunque, creo que cambié a .gif.

pzin · #3 (**permalink**) 28/08/2007, 16:52

Efectivamente, al final cambié el formato a jpg, no gif. Me pasaba que un png no tenía el mismo color que el fondo de una película flash, aunque los valores hexadecimales eran los mismos. Que cosas locas tiene nuestro querido IE. De Guatemala a guatepeor.

No sé si será posible que cambies el formato de las imágenes, o imagen. No sé si existirá alguna forma de arreglar esto, igual si aparace Tunait u otra figura genial nos llena de sabiduría.

Snd234 · #4 (**permalink**) 28/08/2007, 16:53

Tienes que usar este codigo JS, guardalo en un archivo e incluyelo en tu pagina

Código PHP:

  /*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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);

Luego cuando la pagina carge completamente, el codigo buscara todas las imagenes PNG y le asignara su transparencia correspondiente.

Hay otro metodo en caso de utilizar las imagenes como fondos de algun DIV

pzin · #5 (**permalink**) 28/08/2007, 16:58

Creo que no preguntaba por la transparencia, ¿no?

Título del hilo: problema png (no es el de la transaparencia)

Daniel Ulczyk · #6 (**permalink**) 28/08/2007, 17:24

Cita:

Iniciado por mreyesb

pinte el fondo del png del mismo color que le di de fondo al body (un plomo claro)

Cita:

Iniciado por Bonez

aunque los valores hexadecimales eran los mismos.

Los valores hexa pueden ser idénticos, pero cada sistema operativo y cada browser tienen su propia características para mostrarlos.
Este efecto se conoce como dithering (un color generado por diferentes puntos de color).
La única forma de evitarlo es echando mano a la Web Safe Palette
(otro enlace pero con los valores ordenados por HUE)

pzin · #7 (**permalink**) 28/08/2007, 17:31

Gracias Daniel, nunca supe bien para que existía la Web Safe Palette. Buena info esa.

mreyesb · #8 (**permalink**) 28/08/2007, 20:01

gracias por responer... voy a chequiar la información y les cuento como me fue.. gracias de nuevo y saludos