Skip to Content »

PNG transparente en IE

  • 16/04/2008
  • 12:38 am
  • unijimpe

Uno de los problemas mas comunes al implementar páginas HTML es al momento de utilizar PNGs transparentes (En lugar de los GIF transparentes que muestran un borde mordido muy anti-estético) y es que en navegadores Internet Explorer 5.5 y 6 no se muestran correctamente, para ello le presentamos algunas soluciones.

PNGfix
Esta es una pequeña librería hecha en Javascript que permite corregir el problema de los PNGs transparentes en IE, esto se hace incluyendo un Javascript al inicio del HTML. PNGFix es una librería muy pequeña y muy potente, la puedes descargar en pngfix.js y para utilizarla solo tienes que incluirla en tu HTML de la forma:

  1. 123
  2. <!--[if lt IE 7.]>
  3. <script defer type="text/javascript" src="pngfix.js"></script>
  4. <![endif]-->

jQuery.pngFix
Para los usuarios de jQuery existe un plugin jQuery.pngFix que corrige los PNGs transparentes en IE, el cual es sencillo de implementar, funciona con PNGs utilizados como fondos con CSS, con PNGs transparentes que contienen enlaces. Para utilizar este método, primero debes incluir jQuery luego jQuery.pngFix y luego llamar al método pngFix al cargar la página.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.pngFix.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         $(document).pngFix();
  6.     });
  7. </script>

Hay muchos otros métodos para resolver este problema, pero estos son las mas conocidos y mas documentados. Incluso pueden ver una forma solo utilizando CSS: Cross-browser semi-transparent backgrounds. Espero les sirva este pequeño tip que siempre les puede sacar de apuros.

Posts Relacionados

Total de Comentarios: 4

Publicidad
carlos lima
16/04/2008
10:18 am

Super útil!!! Crack!
Me va a servir mucho, sobre todo en el ie6 que desde hace tiempo tenía ese problema. Lo tuve que sustiruir por un flash transparente.
Sin contar que el logo ya no es indexable desde google.

Gracias!

Matias
16/04/2008
11:12 am

Al igual que el anterior comentario, utilizaba FLash a la hora de necesita runa buena transparencia, con este Tip me has dado una ayuda muy grande.

SAludos

Javier
16/04/2008
12:36 pm

La verdad muy útil, yo también usaba Flash,
el único detalle -no sé si a ustedes les ha pasado- pero como que cuando tienes muchas imágenes PNG demora más en cargar la página, estando en local.

kon3raz
18/04/2008
2:30 pm

solo tengo una duda, esto sirve igual si queremos agregar más de un PNG, dentro de la página???

Enviar Comentario

(*)

(*)