viernes, agosto 24, 2007

Imagenes PNG en Internet Explorer - Un problema?



El Problema
En algunas version de IExplorer no soportan el fondo transparente en las imagenes PNG.
Ésto es por que aun no contiene el filtro que arregla éste problema... específicamente en es la versiones 5.5 y 6. Aun en la version 7 (antes de enero 2007).
Una opción puede ser el uso de imagenes GIF, las desventajas son que su peso es mayor a la de un PNG ademas que muchas veces su nitidez no es la esperada



Ahora compara una imagen PNG con la GIF y su textura es mas natural, realmente transparente.



En algunos exploradores como lo son Firefox, Opera y Netscape éste problema ya está solucionado pero para IExplorer y que el fondo se muestra de color obscuro o degradado, pero como siempre, para todo hay una solución.


La solucion
La solucion es una funcioncita en JavaSript que se puede utilizar de dos maneras

a) Copy & Paste
Es la tipica solución a todos nuestros problemas, y yo la recomiendo en caso de que solo lo vaya a usar UNA sola vez.

Copia el codigo del JS y pegado en el header de tu pagina (codigo HTML)
<!--[if lt IE 7]>
<script language="JavaScript">
aqui va el codigo
</script>
<![endif]-->

b) Incluye el archivo JS
  1. Baja el archivo pngfix.js
  2. Agrega el siguiente codigo en el header de tu pagina

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

    **NOTA: Si usas Master Pages, colocala en ella y te ahorras el tarbajo de ponerla en cada una de tus paginas web
La palabra defer nos permite reemplazar las imagenes (accion que hace el JS) antes que la pagina haga el render, ésto no permte que la ssutitución sea transpárente para el cliente ya que si el provoca un parpadeo, mostrando la imagen con fondo obscuro y despues la imagen con fondo transparente.

El tiempó de la transferencia o filtro de imagenes debe ser alrededor de 0.3 segundos en una conexion manual de 48kbps.

1 comentario:

Anónimo dijo...

yeah!!!
Super Marce otra vez me dejo kon el ojo kuadrao y aunke no entendi muy bien el codigo ps...
COPY PASTE!!!!
jejejeje good advice!!!