Foros del Web » Creando para Internet » Diseño web »

IE6 + PNG transparente. Otra solución

Estas en el tema de IE6 + PNG transparente. Otra solución en el foro de Diseño web en Foros del Web. Encontrado en castellano en anieto2K en esta entrada: anieto2k.com/ 2008/12/09/ png- transparentes- faciles- para-ie6-con-dd_belatedpng/ que por concisa y clara la explicación la transcribo literalmente: Cita: ...
  #1 (permalink)  
Antiguo 10/12/2008, 11:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
IE6 + PNG transparente. Otra solución

Encontrado en castellano en anieto2K en esta entrada:
anieto2k.com/ 2008/12/09/ png- transparentes- faciles- para-ie6-con-dd_belatedpng/
que por concisa y clara la explicación la transcribo literalmente:
Cita:
Título:
PNG transparentes fáciles para IE6 con DD_belatedPNG
Los PNG’s tranparentes en Internet Explorer siempre han sido un incordio, pero cada vez se van desarrollado sistemas más sencillosy sobretodo más cómodos para los desarrolladores, sistemas con los que evitar que tardemos demasiado tiempo en hacer algo que debería hacer el navegador.

Con DD_belatedPNG podemos hacer exactamente esto, perder 2 seg en indicar que elemento queremos hacer transparente y a desarrollar algo interesante.
Cita:
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->
El script, de tan solo 6,66 kb (3,84kb comprimido) está bajo la licencia MIT y lo podemos descargar directamente desde aqui.
Interesante también alguno de los comentarios aportados por los lectores, entre los que reseño:
Cita:
Esto funciona con las funciones background-repeat o background-position e img:hover
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 10/12/2008 a las 12:33
  #2 (permalink)  
Antiguo 10/12/2008, 12:11
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: IE6 + PNG transparente. Otra solución

Me parece excelente!, muy buen aporte...
ya estaba aburrido de que el IE no aceptara las transparencias del PNG, con esto ya solucionaremos todo =D
se agradece que salvaras este codigo, el link no se encuentra en la web :S
se merece un articulo en mi web...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #3 (permalink)  
Antiguo 10/12/2008, 12:29
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: IE6 + PNG transparente. Otra solución

Se agradece el aporte. ;)

Voy a probarlo a ver que tal funciona.




Bye.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #4 (permalink)  
Antiguo 10/12/2008, 12:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: IE6 + PNG transparente. Otra solución

Gracias Null_ por la observación.
Por algúna razón desconocida el foro sustituye en el enlace
anieto2k.com/ 2008/12/09/ png- transparentes- faciles- para-ie6-con-dd_belatedpng/
la palabra "-faciles" por "*****es".
¿Asociará esa cadena a alguna de las expresiones prohibidas?
Quien desee ver el origen, sólo tiene que copiar lo que está en negrita y pegar en su navegador.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 10/12/2008, 12:59
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: IE6 + PNG transparente. Otra solución

ahi si veo el enlace... gracias =D
encontre otro código para los pngs en ie6, esta en la web de mikmoro, aqui dejo el enlace:
http://www.araudi.net/ejemplos/png_para_IE.html

saludos
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #6 (permalink)  
Antiguo 10/12/2008, 13:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: IE6 + PNG transparente. Otra solución

Sí, Null_, hay unos cuantos. Y ese, en concreto, Mikmoro ya lo ha explicado varias veces en estas páginas.
por eso titulé: "...Otra solución"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 10/12/2008, 17:17
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: IE6 + PNG transparente. Otra solución

Cita:
Iniciado por kseso? Ver Mensaje
Sí, Null_, hay unos cuantos. Y ese, en concreto, Mikmoro ya lo ha explicado varias veces en estas páginas.
por eso titulé: "...Otra solución"
perfecto, no le había tomado mucha importancia a "otra solucion"

PD: no estaba demás saber el otro link, yo no lo sabia... jaja
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #8 (permalink)  
Antiguo 10/12/2008, 18:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Pues tiene muy muy buena pinta. A ver si mañana lo estrujo un poco.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 14/12/2008, 13:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Ahora que veo revivir este tema me acuerdo de que efectivamente estuve probando el script y parece que todo va perfectamente. Lo he probado con imagenes, con fondos repetidos o no, y todo va de maravilla. Además se asigna de manera muy fácil a todo un bloque de selectores a los que lo quieras aplicar, y te olvidas de dónde está la imagen blank, de los lios que se hace IE a veces con las rutas relativas en scripts y eso, etc.

Para mi un 10 (bueno, un 9,5, a ver si alguien le encuentra alguna pega )

Gracias kseso por compartirlo. Sigo con la sección pendiente de "búsquedas increíbles"
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 14/12/2008, 14:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: IE6 + PNG transparente. Otra solución

Pues si usted dice que es que sí, ya me saco la espina que tenía con el tema @font o el uso de "fuentes bonitas" que parece no va.
Siendo así, ¿podría ir a las faq´s de este foro o de Xhtml?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 14/12/2008, 18:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Por mi con (casi) toda garantía.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 15/12/2008, 03:58
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: IE6 + PNG transparente. Otra solución

Cita:
Iniciado por kseso? Ver Mensaje
Por algúna razón desconocida el foro sustituye en el enlace la palabra "-faciles" por "*****es".
¿Asociará esa cadena a alguna de las expresiones prohibidas?
Así es. El final de la palabra transparentes junto con el guión el las primeras letras de la palabra faciles conforman un término baneado de los foros.

Cita:
Iniciado por kseso? Ver Mensaje
Siendo así, ¿podría ir a las faq´s de este foro o de Xhtml?
En xhtml no encaja pero sí en este foro de Web general. Ya agregué la opción a las FAQ con link a este tema

Gracias por el aporte


saludos
  #13 (permalink)  
Antiguo 15/12/2008, 12:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: IE6 + PNG transparente. Otra solución

Gracias Tunait, por la explicación.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 15/12/2008, 16:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Pues yo todavía me estoy comiendo la cabeza con cuál puede ser ese término. A veces soy un poco lento
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 16/12/2008, 03:23
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: IE6 + PNG transparente. Otra solución

Cita:
Iniciado por Mikmoro Ver Mensaje
Pues yo todavía me estoy comiendo la cabeza con cuál puede ser ese término. A veces soy un poco lento


el término es es -facil todo junto
  #16 (permalink)  
Antiguo 16/12/2008, 11:53
Avatar de freemanworld  
Fecha de Ingreso: agosto-2008
Mensajes: 191
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: IE6 + PNG transparente. Otra solución

Pregunta tonta...:
¿vale con solo poner el siguiente código?
Cita:
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->
¿O tenemos que instalar alguna otra cosa?
En tal caso, ¿dónde habria que instalarlo?

Gracias y un saludo
  #17 (permalink)  
Antiguo 16/12/2008, 13:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Basta con eso, y el elemento al que quieras que afecte, en tu caso deberás añadirle la clase .png_bg, que es lo que has declarado.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 16/12/2008, 16:11
Avatar de freemanworld  
Fecha de Ingreso: agosto-2008
Mensajes: 191
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: IE6 + PNG transparente. Otra solución

Perdon pero no me ha quedado muy claro..
Me lo podrias explicar por favor?

Gracias anticipadas.
  #19 (permalink)  
Antiguo 16/12/2008, 17:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: IE6 + PNG transparente. Otra solución

Se supone que el script lo vas a usar para conseguir trnasparencia en IE6 en algún elemento (un fondo, una imgen,). De alguna manera hay que decirle que aplique ese script a ese elemento concreto.

Con esta parte:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<![endif]-->

cargas el script puramente, y con esta otra:

<script>
DD_belatedPNG.fix('.png_bg');
</script>

le dices que aplique esa función del script sólo a cualquier elemento que lleve la clase png_bg ('.png_bg')

Ahora, si a un div al que has puesto un fondo con un PNG medienta css, quieres que le afecte el script y también se transparente en IE6, simplemente añádele esa clase:

<div class="png_bg">una caja...</div>

En realidad eso es sólo un ejemplo. Puedes pasar como parámetro de la función cualquier otro elemento o grupo de elementos:

DD_belatedPNG.fix('div#uno'); (por ejemplo)
__________________
Visita mi nueva web idplus.org
  #20 (permalink)  
Antiguo 17/12/2008, 01:04
Avatar de freemanworld  
Fecha de Ingreso: agosto-2008
Mensajes: 191
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: IE6 + PNG transparente. Otra solución

Así que poniendo simplemente el código del script ya funcionaria?
  #21 (permalink)  
Antiguo 05/06/2009, 04:05
Avatar de rusoftware  
Fecha de Ingreso: abril-2004
Ubicación: Rosario - Argentina
Mensajes: 1.083
Antigüedad: 13 años, 8 meses
Puntos: 2
Respuesta: IE6 + PNG transparente. Otra solución

Cita:
Iniciado por freemanworld Ver Mensaje
Así que poniendo simplemente el código del script ya funcionaria?
Claro que tienes que guardar el javascript DD_belatedPNG.js (que descargas del sitio oficial) en el directorio raiz (para este caso)...



Yo hace un buen tiempo que uso este fix, y he de decir que va de maravillas, salvo por una pequeña pega a la que aún no le encuentro la vuelta, aunque probablemente sea yo...


Cuándo necesitas hacer un rollover simple con css e img (png) de background (que se posicione el background en :hover) (sin javascript), en ie6, el :hover se mueve 1px hacia arriba...


Espero haberme explicado, si no es asi, pongo ejemplos; y si alguien le encontro la vuelta, pues bienvenida será la solución


Por lo demás, un fix fabuloso. El mejor que he utilizado para solucionar este problema de M$.
  #22 (permalink)  
Antiguo 26/12/2011, 15:10
 
Fecha de Ingreso: junio-2010
Mensajes: 353
Antigüedad: 7 años, 5 meses
Puntos: 6
Respuesta: IE6 + PNG transparente. Otra solución

pues amí no me va y hize lo siguiente;

<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.nieve2'); //EXAMPLE
</script>
<![endif]-->

y

<center><div class="nieve2"><img src="snow.png"/></div></center>


El script lo lee, y también detecta que es ie6
  #23 (permalink)  
Antiguo 26/12/2011, 15:47
 
Fecha de Ingreso: junio-2010
Mensajes: 353
Antigüedad: 7 años, 5 meses
Puntos: 6
Respuesta: IE6 + PNG transparente. Otra solución

este no me ha ido pero este sí,

http://blog.unijimpe.net/png-fix-para-ie6/

ale y no os cageis más en windows xD
  #24 (permalink)  
Antiguo 26/12/2011, 16:02
 
Fecha de Ingreso: abril-2008
Mensajes: 222
Antigüedad: 9 años, 7 meses
Puntos: 8
Respuesta: IE6 + PNG transparente. Otra solución

Muy buen dato, pero me parece que en internet explorer 6 se ven las trasparecías, por ejemplo en mi pc con xp y explorer 6 se ven bien, el problema seria con windows 98, pero igual me parece que salio un parche que corrige el error. No se preocupen por que no se vean las transparencias en ie6 total la gente no usa mas windows 98 o milenium, y para el que lo usa hay que obligarlo a que se compre un pc nuevo y que se actualice.
__________________
ganar dinero 3d
  #25 (permalink)  
Antiguo 27/12/2011, 06:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: IE6 + PNG transparente. Otra solución

Gracias por los avisos y advertencias varias, pero...
fíjense en la fecha de apertura del tema:

10/12/2008

Hace más de 3 años.
Gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:22.