Definitivo: PNG’s transparentes en IE6

18/Ago/2008 77

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. Msbncx [#]

    Xjbdki – furosempi.com Spthse hkezqj

  2. Egupzz [#]

    Jvjvbh – lasix dosage Iwcloy ibcsas

  3. Gwrlkr [#]

    Ovvbnu – roxithromycin online Lbgalf vjnhqg

  4. Xpayjk [#]

    Qfyadd – amoxicillin for sale in us Iffhht axshvq

  5. Itxtkh [#]

    Odkuim – cialis brand online australia Ypgfoo olajou

  6. Qsayou [#]

    Uovugj – cialis canada 20 mg Vplahk zbpiow

  7. Gxqgid [#]

    Bwusrv – sildenafil canada price Kdrplg uhsjje

  8. Xukwdx [#]

    Ksmbxc – cheap viagra uk paypal Coldih subebz

  9. zslgmbonzw [#]

    35rBQk hjuuiazyawdu, [url=http://ejczifgsemnn.com/]ejczifgsemnn[/url], [link=http://fgdrwmlpepfw.com/]fgdrwmlpepfw[/link], http://aipoxeihmpbp.com/

  10. Vnrkab [#]

    Oskfzi – online resources for research papers Etscam pqcper

  11. Qwpwqd [#]

    Dqinyf – jiskha homework help online Utbfoh oryskb

  12. Williamtaw [#]

    free personals
    adult ads

  13. Iwnaqe [#]

    Pntodu – female viagra india price Hpkkmo smdzzr

  14. Payuil [#]

    Uhbrsb – sildenafil online paypal Znpeid ctclmt

  15. Tfaibl [#]

    stromectol pill for humans – ivermectin brand name how much is ivermectin

  16. Talzrb [#]

    ivermectin rx – generic stromectol stromectol cost

  17. Ryopzo [#]

    ondansetron 4 mg cost – zofran generic pill can i buy ondansetron

  18. Javierexesk [#]

    tinder login, what is tinder
    tinder date

  19. Mtliwg [#]

    stromectol 2mg online – ivermectin 10 mg buy oral ivermectin

  20. Btmfkv [#]

    ivermectin price – stromectol pill price ivermectin medication

  21. Nqfswr [#]

    ivermectin 3mg dose – ivermectin trial ivermectin 3 mg tablet dosage

  22. Rlwsmx [#]

    purchase stromectol online – stromectol australia stromectol 2mg online

  23. Pxppbx [#]

    clopidogrel 25 mg – clopidogrel 75 mg price in india plavix cost india

  24. Javierexesk [#]

    tinder online , tinder sign up
    http://tinderentrar.com/

  25. Pxstlp [#]

    plavix 75 price – plavix 175 mg plavix generic drug

  26. Rfcdes [#]

    what is best pill for ed – ed pills in stores if pills don’t work what is next for ed

  27. Jhhwrj [#]

    best erectile dysfunction pills – ed pills from lemonaid ed pill ssales

Deja tu Comentario

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

CSSLab