Definitivo: PNG’s transparentes en IE6

18/ago/2008 34

Finalmente dí con la solución final a mis problemas de soporte de transparencias de PNG para IE6. Este tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi anterior artículo sobre este mismo tema, la solución es real pero su implementación se torna complicada de adaptar en cualquier ámbito de sus proyectos.

Últimamente he logrado probar e implementar 2 soluciones diferentes para solucionar este drama que nos reúne. Ambas se implementan mediante Javascript y necesitan de leves retoques para funcionar (no se frustren si no se ve a la primera, basta con pensar denuevo cómo están las estructuras de tus archivos y colocar adecuadamente las rutas).

Twinhelix PNG Fix v2

Esta segunda versión está de lujo y me hizo volver a creer en el trabajo de Twinhelix. Lo que hace esto es a través de un behavior agrega soporte casi-nativo del canal alpha de PNG para IE5.5+ sin tener que hacer cambios en el documento HTML. Otras ventajas:

  • Conversión configurable de elementos PNG.
  • Soporta para imágenes llamadas a través de la etiqueta HTML <img /> y mediante la propiedad CSS background-image.
  • Soporta la repetición del background mediante background-repeat.
  • Las imágenes pueden ser llamadas dentro del mismo documento o mediante hojas de estilos externas.
  • Soporta cambios de estado de la imagen mediante CSS o Javascript.
  • Soporta links que sean llamados en capas superiores a la del PNG transparente.
  • Muy pequeño y liviano.
  • Gratis.

Modo de uso:

  1. Copiar iepngfix.htc y blank.gif a la estructura de tu sitio.
  2. Copiar esta sencilla línea de código CSS que define en cuáles elementos el .htc hará que las imágenes soporten transparencia. Ten cuidado de llamar a la ruta del .htc correctamente:
    img, div { behavior: url(iepngfix.htc) }
  3. Ten el cuidado de además entregar la ruta correcta en iepngfix.htc en que tienes el blank.gif. Te recomiendo en esta hacerlo de forma absoluta:
    var blankImg = '/imagenes/blank.gif';
  4. Eso es. Cuando termines todo eso deberías de ver algo similar al ejemplo 1.

Ver ejemplo 1 (con IE6, claro).

Bajar Twinhelix IEPNGFix v2

Unit PNG Fix

Irrumpió en la web hace muy poco y la está rompiendo. Este método se aplica mediante el llamado de un Javascript, el que al igual que el anterior lee un archivo clear.gif y lo aplica a los PNG’s haciéndolos transparentes para IE6. Su plus es que pesa sólo 1kb y para su implementación sólo se requiere llamar el .js. Claro que se debe tener el cuidado de aplicar las rutas, tanto del .js como del .gif correctamente. Puedes llamar el unitpngfix.js mediante comentarios condicionales, de la siguiente manera:

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

En la primera línea de código del unitpngfix.js, debes configurar la ruta desde dónde llamar clear.gif, y nuevamente recomiendo que sea absolutamente:

var clear="/imagenes/clear.gif"

Y ya. Si seteaste bien las rutas, deberías de ver algo similar al ejemplo 2.

Ver ejemplo 2 (con IE6, insisto).

Bajar Unit PNG Fix

Y: ¿Cuál es mejor? Hasta ahora, ambas me han funcionado perfecto, por lo que les dejo a uds. definir su favorito.

Comentarios

  1. Rolando Murillo [#]

    Superb! Va directo a super.acualicio.us, mi nuevo tumblog, al fín un artículo con soluciones definitivas, cosas que faltan en la vida diaria.

  2. Bono [#]

    A ambos les queda una tarea pendiente, los enlaces con :hover, no cambian cuando tienen PNGs.
    Sin embargo sigo prefiriendo el IEPNGFIX 2

    Ojalá algún día puedan mejorar eso. Igual creo que avanzaron muchísimo con el background-repeat y el background-position, que no son poca cosa.

    Saludos!

  3. fearlex [#]

    Wow, ahora si que te pasastes de liga. Justo lo que necesitaba 😀

    Gracias

  4. Anaya [#]

    Twinhelix PNG Fix v2 no funciona con lightbox , mm mas bien con la libreria scriptalacius

  5. IsaacDM [#]

    Pero si funciona con la de mootols,
    ademas de que no se conflictúa si la utilizas directamente con ie7-js (o elie8-js) que les recomiendo ver en googleCode.

    Excelente Jorge, yo apenas la vi hace 1 semana. tambien para cualquier flashero por ahi, le recomiendo que cheque swfAdress para mejorar los sitios en flash ( y swfobject 2 para mejorar el markup al incluir cualquier flash)

  6. IsaacDM [#]

    por cierto ups, hay 2 clones de lightbox hechos para mootools, esta milkbox y creo que el otro es slimbox.

  7. Sauce [#]

    Estube ocupando unitpngfix en un proyecto y me posiciona todas las imagenes de fondo arriba y a la izquierda lo cual fue bastante decepcionante ya que todo se basaba en este item, el alinamiento de las imagenes…

    saludos.

  8. manuedit [#]

    me quedo Twinhelix PNG Fix v2
    pq soporta IE5 pa arriba…

    si estoy loco xD…pero abarca mas

  9. Héctor [#]

    Estoy con Sauce , las posiciones del fondo arriba y a la izquierda decepciona un monton..

  10. Leandro [#]

    Intente este metodo creyendo que era la solucion definitiva para el problema en mis imagenes. Aparece la trasparencia, pero me deforma todas las imagenes y ademas les agrega un recuadro con la cruz roja sobre las mismas. Hay algunas imagenes que contienen links, y otras que son rollovers con links tambien. No entiendo porque en el articulo dice que soporta links…sinceramente a esta altura estoy a punto de decistir con la implementacion del filtro, ya q no me funciona. Alguna solucion=?

  11. Jorge Epuñan [#]

    Leandro: he usado ambas tecnicas y las 2 me fueron bastante satisfactorias, por eso recomiendo cualwuiera de ellas. Quizas podrias ser mas especifico con cuyal te da error y como, porq siento q no es error de la tecnica sino de la implementacion. salu2.

  12. Leandro [#]

    Jorge: Gracias por tu pronta respuesta, la verdad es que trato y no hay manera de que no se deformen las img. y aparezca el recuadro con la cruz roja. Estoy tratando con Twinhelix PNG Fix v2…el behavior en css creo q esta bien implementado, es demasiado sencillo como para tener el error ahi.
    Pienso que el problema esta en la ruta en iepngfix.htc en que tengo el blank.gif (esta es la parte que no me quedo demasiado clara). Asi me quedo:

    var IEPNGFix = window.IEPNGFix || {};
    IEPNGFix.data = IEPNGFix.data || {};

    Si sirve para algo las imagenes estan dentro de la carpeta “imagenes”.
    Bueno, Jorge cualquier respuesta sera agradecida, ya que hace algun tiempo que me estoy rompiendo la cabeza con este problema.

    // This must be a path to a blank image, relative to the HTML document(s).
    // In production use I suggest ‘/imagenes/blank.gif’ or similar. That’s all!
    IEPNGFix.blankImg = ‘/imagenes/blank.gif';

  13. Jorge Epuñan [#]

    Leandro: publica una demo de tu sitio en los foros aver si puedo yo o alguien mas ayudarte.

    salu2.,

  14. Leandro [#]

    Jorge, ya logre solucionar el problema. No habi colocado bien el archivo blank.gif…y respeto al tamaño de las imagenes las defini en las reglas de estilo.
    Muy prolija la pag, y gracias por todo : )

  15. Francisco [#]

    Un saludo y gracias por las dos tecnicas y la web en general.
    Tengo un problema molesto
    Utlizo Unit PNG Fix, carga bien los png transparentes, en capas, … blabla … pero primero carga el borde transparente como blanco, e inmediatamente despues desaparece. Que se muestre el borde blanco antes de borrarse queda feo. Se puede solucionar??

    Muchas gracias

  16. gastón [#]

    hola, muy bueno el post, ya había probado de todo y estos ultimos pero no me habían funcionado. Ahora el Twinhelix me funciona pero son en un DIV, no con imágenes de fondo, tampoco si están dadas x CSS. Alguna idea esta es la página http://www.comstore.com.ar/smm
    gracias

  17. Dr. WordPress [#]

    Perdón por lo que voy a decir pero ahi va:

    Eso va en el header.php.

    ¿Y esto?:

    var clear="/imagenes/clear.gif"

    Soy principiante,

    Maxi Sanchezz

  18. Jorge Epuñan [#]

    Dr. WordPress, clear va “En la primera línea de código del unitpngfix.js“, o sea, en el javascript q bajas de UnitPNGFix.

  19. Dr. WordPress [#]

    Muchisimas gracias. Use el segundo me fue de maravilla. Una acotación: en la Web oficial el codigo esta así:

    Saludos 😀

  20. Testing [#]

    Srs. acabo de abrir los dos links de arriba con el IE6 y en ambos la transparencia se ve con fondo celeste. O sea, con qué versión anda ?

  21. Jorge Epuñan [#]

    Testing: IE6 o menor; en mis tests anmdubo super y por eso los recomiendo. Saludos.

  22. etzekiel [#]

    Lo que no me gusta es que tarda el script en cargar….

  23. Shark [#]

    Hola Jorge, la verdad que funciona muy bien, pero tengo un problema, si pongo el script asi no me lo acepta, el caso es que uso blogger, espero me des una mano, porque si lo pongo sin la condicion, obiamente tambien funciona, pero en Opera los png con transparencias desaparecen.
    Todo esto referido al Unit PNG Fix.

  24. Shark [#]

    Creo que no me explique bien, si pongo el script con la condicion no me lo acepta, pero si lo pongo sin la condicion en opera desaparecen los png que tienen transparencias.

    Ahi esta mas claro, espero alguna ayuda.

  25. Jorge Epuñan [#]

    Shark: asegurate de utilizar bien el comentario condicional; acabo de visitar tu sitio y UnitPNG estan como dices funcionando para cualquier browser pero se recomienda q sea solo para mejores de IE7 (if lt IE 7). Para mas info: Se viene IE7…. ¡huid!. Exito!

  26. Shark [#]

    Gracias, era un problema de sintaxis, para que funcione en blogger ahi que poner un doble guion, quedaria asi:


    Hack

  27. Oscar [#]

    Demora en cargar porque se ejecuta al terminar de cargar la página. window.onload

    Ando buscando algo parecido para los objetos

  28. Lionel [#]

    nada mas que un aplauso para vos, es un recurso exelente de verdad…. gracias mil

  29. elandy2009 [#]

    Ojo, esto solo funciona con Internet Explorer 6. Si buscan algo para IE5.5, solía haber uno pero ya no existe más. Total IE5.5 y anteriores ya son obsoletos

  30. Javier Urbina [#]

    recuerdo que hace un tiempo estaba intentando poner un background con un png y lo peor era que la imagen la estiraba al 100% del tamaño del contenedor,alguien sabe si esta version tiene ese problema?

  31. Alejandro [#]

    Muchas gracias!! Su sitio web me ha ayudado en infinitas veces! Es usted un gran profesional, lo digo porque también fui alumno suyo.

    Saludos.

  32. html by gerardag - Pearltrees [#]

    […] Definitivo: PNG’s transparentes en IE6 Esta segunda versión está de lujo y me hizo volver a creer en el trabajo de Twinhelix . Lo que hace esto es a través de un behavior agrega soporte casi-nativo del canal alpha de PNG para IE5.5+ sin tener que hacer cambios en el documento HTML . Otras ventajas: […]

  33. Mi lucha (contra IE6) ↝ CSSLab [#]

    […] a través del diseño. Por ejemplo, utilizo PNG’s transparentes, aunque agrego un PNGfix por deferencia sólo para usuarios de ese […]

  34. Felipe Alvarez [#]

    Excelente articulo, me parece muy útil para todos los que tratamos de diseñar para la web y todos sus usuarios. Gracias!

Responder a elandy2009 ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab