Solucionar las transparencias de imágenes PNG en Internet Explorer
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:
-
<!--[if lt IE 6.]>
-
<script defer type="text/javascript" src="pngfix.js"></script>
-
<![endif]-->
Pablo Rosales said,
Wrote on June 8, 2007 @ 12:34
Muy útil gracias! Ya conocía la técnica paro esta es la manera más rápida de aplicarla
eitán said,
Wrote on June 8, 2007 @ 16:12
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.
Christian said,
Wrote on June 8, 2007 @ 19:42
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.
Nikko said,
Wrote on June 9, 2007 @ 1:16
eitán: si es algo a tener en cuenta..saludos
Nikko said,
Wrote on June 9, 2007 @ 1:17
Christian: corregido ^_^ saludos
EDENAHP.NET - Juanjo Vargas 's Blog said,
Wrote on June 9, 2007 @ 11:35
[...] 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 [...]
Alex said,
Wrote on June 9, 2007 @ 16:42
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.
PNG’s en Internet Explorer | Infected-FX| tutoriales, photoshop brushes y recursos para diseñadores web said,
Wrote on June 13, 2007 @ 3:27
[...] 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 [...]
Michael Müller said,
Wrote on June 18, 2007 @ 18:01
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/
Nikko said,
Wrote on June 19, 2007 @ 1:33
Michael : gracias la info, vere en estos dias ampliar aun mas este tema ^_^ saludos !!!!!!!
Codigo Geek » Blog Archive » Problemas con transparencias de PNG en internet explorer said,
Wrote on July 1, 2007 @ 17:42
[...] Xyberneticos me entero como solucionar los problemas que tiene Internet Explorer con las transparencias en [...]
LIsandro said,
Wrote on July 4, 2007 @ 10:37
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.
ivan said,
Wrote on July 4, 2007 @ 19:34
Tengo que hacer los bordes sombreados de un site, utilizo un png como fondo pero no me funca el codigo
Silvana said,
Wrote on July 30, 2007 @ 6:28
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
Nikko said,
Wrote on July 31, 2007 @ 19:52
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
fearlex said,
Wrote on August 2, 2007 @ 23:35
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.
Muy bueno el fix. Saludos
Sallen said,
Wrote on September 1, 2007 @ 8:11
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!!!
Fondo que se desvanece con CSS ~ Gran Impetu said,
Wrote on September 18, 2007 @ 20:11
[...] en cuenta es que las transparencias de PNG no funcionan en Internet Explorer 6, aunque podemos usar algunos métodos para solucionar [...]
Luciano Nicolás said,
Wrote on January 14, 2008 @ 18:27
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!
maki said,
Wrote on February 1, 2008 @ 9:16
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
zerawel said,
Wrote on September 5, 2008 @ 18:13
no he probado el fix,, pero suena muy util ya que muchos diseños que presentamos manejan transparencias...
gracias por el aporte
Ksper said,
Wrote on October 5, 2008 @ 19:43
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