8

Solucionar las transparencias de imágenes PNG en Internet Explorer

Publicado por Nikko el dia 8 Jun 2007 - Guardado en 562 Views CSS, Diseño Web, Webmaster 562 Views

ie

No es nada nuevo decir que Internet Explorer nos trae mas problemas que soluciones a la hora diseñar un sitio web, sobretodo cuando deseamos usar imágenes png en nuestros proyectos. Este pequeño script te permitirá solucionar este pequeño problema con Internet Explorer a la hora de mostrar las transparencias de imágenes PNG.
Descarga el fichero javascript, descomprímelo y súbelo a tu servidor.Luego solo copia la siguiente llamada entre las etiquetas < head >< /head > de tu pagina web (En el caso de wordpress la encontraras en el encabezado):

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

DescargaVia Pixel-inc

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!
comentarios
  1. Pablo Rosales - Gravatar

    Pablo Rosales

    8 - 06 - 2007

    Permalink

    Muy útil gracias! Ya conocía la técnica paro esta es la manera más rápida de aplicarla :)

  2. eitán - Gravatar

    eitán

    8 - 06 - 2007

    Permalink

    Realmente buenisimo! :)
    un consejo, aplicando esto a los headers de los blogs, se agrega el codigo en el archivo header.php del theme y es necesario poner toda la ruta del "pngfix.js", por que si no: cuando vallamos a alguna parte del blog que no sea del archivo index.php, el script deja de funcinonar.

  3. Christian - Gravatar

    Christian

    8 - 06 - 2007

    Permalink

    Sólo un comentario, en "if lt IE 7", más bien sería "if lt IE 6". Pues Internet Explorer 7 si respeta las transparencias PNG, el que no lo hace es Internet Explorer 6.

    Un saludo.

  4. Nikko - Gravatar

    Nikko

    8 - 06 - 2007

    Permalink

    eitán: si es algo a tener en cuenta..saludos

  5. Nikko - Gravatar

    Nikko

    8 - 06 - 2007

    Permalink

    Christian: corregido ^_^ saludos

  6. [...] 6 e inferiores, las transparencias en los PNG no se muestran correctamente, esto se soluciona con un script que, mediante un código condicional en el css, solo leeran los usuarios de Internet explorer 6 o [...]

  7. Alex - Gravatar

    Alex

    8 - 06 - 2007

    Permalink

    Oye muchisimas gracias, fijate que por curiosidad visite tu blog por el comentario que dejaste en el aniversario de blogultura y encontre la solucion a mi problema jajaja.

  8. [...] de los archivos png en Internet Explorer?… algunas veces como bien lo mencionó en su momento Nikko, usábamos un javascript que nos permitía poner estos archivos y que IE respetara la [...]

  9. Michael Müller - Gravatar

    Michael Müller

    8 - 06 - 2007

    Permalink

    Este script es bueno, sin embargo así como está, no funciona con las imágenes que están declaradas en el css (backgrounds). Ahi hay que aplicar otros métodos o complementar el script: http://www.mmcdesign.com/blog/2007/06/12/hack-de-ie-para-transparencia-de-pngs/

  10. Nikko - Gravatar

    Nikko

    8 - 06 - 2007

    Permalink

    Michael : gracias la info, vere en estos dias ampliar aun mas este tema ^_^ saludos !!!!!!!

  11. [...] Xyberneticos me entero como solucionar los problemas que tiene Internet Explorer con las transparencias en [...]

  12. LIsandro - Gravatar

    LIsandro

    8 - 06 - 2007

    Permalink

    Hay un problema, cuando utlizas este fix en una imagen de fondo que se encuentra bajo una lista de links, estos quedan inaccesibles. O sea, ya no se ven como links sino como un texto que no lleva a ningun lado.

  13. ivan - Gravatar

    ivan

    8 - 06 - 2007

    Permalink

    Tengo que hacer los bordes sombreados de un site, utilizo un png como fondo pero no me funca el codigo

  14. Silvana - Gravatar

    Silvana

    8 - 06 - 2007

    Permalink

    Hola!.. soy una ABSOLUTA amateur.. y etsaba mintandome felismente una web con capas y transparencias... cuando descubri q en IE6 no se veian... Copie tu solución, agregué un fichero JS, y la llamada dentro del head. Pero sigue sin funcionar....
    Seguro que por error mio.. Pregunta: ¿Hay que señalar cuales son las imagenes PNG de la web, en algun lugar??... Yo solo copie el fichero tal cual, y agregue la llamada en el head.

    Ayuda por favor!!!
    MIL GRACIAS

  15. Nikko - Gravatar

    Nikko

    8 - 06 - 2007

    Permalink

    silvana: el script funciona bien, solo que este truco por decirlo de una manera no funciona con las imágenes que están declaradas en el css (Nuestra hoja de estilo).
    estoy realmente loko hoy navegando a unos 16kb en Internet, por problemas con el servidor, ni bien mejore, tratare de hacer una recopilación sobre información de este tema, y ampliar a la vez un poco mas esto, que es una de las cosas mas fastidiosas que se dan en IE...
    ten paciencia que en estos dias trate de poner mas sobre esto...
    Ojala mejore de una vez por todas la señal a Internet..y levanten de una vez el paro los técnicos de telefónica que hace 14 dias me tienen loko ^^
    Saludos

  16. fearlex - Gravatar

    fearlex

    8 - 06 - 2007

    Permalink

    En respuesta al comentario #2, de Christian:

    "Sólo un comentario, en "if lt IE 7", más bien sería "if lt IE 6". Pues Internet Explorer 7 si respeta las transparencias PNG, el que no lo hace es Internet Explorer 6."

    Si utilizas "if lt IE 6" estarias solamente haciendo el llamado a nvagadores MENORES que el IE6, por lo que el IE6 no estaria incluido, seria a partir del 5.5 hacia abajo. Por que ?? porque lt significa "later", ahora si pones "if lt IE 7" entonces estarias igual dejando afuera IE7 o sea TODOS LAS VERSIONES ANTERIORES A IE7" y estarias haciendo el llamado a todos las versiones del IE6 hacia abajo. Ahora si pusiera "if lte IE 7", fijate en la "e" despues del "lt" entonces si estarias diciendo: TODOS LAS VERSIONES ANTERIORES E IGUALES A IE7".

    Esto es sin motivo de ofender, solo aclaro para la correcta implementacion de los "GRACIAS A DIOS" comentarios condicionales. :D

    Muy bueno el fix. Saludos

  17. Sallen - Gravatar

    Sallen

    8 - 06 - 2007

    Permalink

    excelente fix!!
    a Silvana no se le habra olvidado quitar los "!--[" ???
    solo una preguntilla a mi con el 6, se me queda todo el rato como si estuviese cargando la imagen, es normal???

    muchas gracias!!!

  18. [...] en cuenta es que las transparencias de PNG no funcionan en Internet Explorer 6, aunque podemos usar algunos métodos para solucionar [...]

  19. Luciano Nicolás - Gravatar

    Luciano Nicolás

    8 - 06 - 2007

    Permalink

    Como bien Dice "fearlex", el comentario condicional estaba bien con el número 7. "Nikko" creo que deberías corregir el pequeño error, ya que se puede prestar a confusión si no se leen los comentarios. ¡Saludos!

  20. maki - Gravatar

    maki

    8 - 06 - 2007

    Permalink

    Hola he probado el Fix y decir que funciona,lo unico es que solo me funciona una vez cargada la pagina y dandole a actualizar o clickando en el boton home o alguna otra seccion de la web,es decir segun se carga la web no funciona.

    saludos

  21. zerawel - Gravatar

    zerawel

    8 - 06 - 2007

    Permalink

    no he probado el fix,, pero suena muy util ya que muchos diseños que presentamos manejan transparencias...

    gracias por el aporte

  22. Ksper - Gravatar

    Ksper

    8 - 06 - 2007

    Permalink

    Holas! estoy renegando hace bastante con el png fix, no se qué estoy haciendo mal porque no me está funcionando, e incluso en ocasiones me genera un error de explorer. Como siempre encuentro cosas útiles en este site, quizás una vez más se me pueda dar una mano. Saludos



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: