IE6 + PNG transparente. Otra solución

[kseso?]

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:

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.

<!--[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:

Esto funciona con las funciones background-repeat o background-position e img:hover

[Null_]

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...

[pitufoweb]

Se agradece el aporte. ;)

Voy a probarlo a ver que tal funciona.




Bye.

[kseso?]

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.

[Null_]

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

[kseso?]

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"

[Null_]

Iniciado por kseso?

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

[Mikmoro]

Pues tiene muy muy buena pinta. A ver si mañana lo estrujo un poco.

[Mikmoro]

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"

[kseso?]

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?

[Mikmoro]

Por mi con (casi) toda garantía.

[tunait]

Iniciado por kseso?

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.

Iniciado por kseso?

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

[kseso?]

Gracias Tunait, por la explicación.

[Mikmoro]

Pues yo todavía me estoy comiendo la cabeza con cuál puede ser ese término. A veces soy un poco lento

[tunait]

Iniciado por Mikmoro

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

[freemanworld]

Pregunta tonta...:
¿vale con solo poner el siguiente código?

<!--[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

[Mikmoro]

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.

[freemanworld]

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

Gracias anticipadas.

[Mikmoro]

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)

[freemanworld]

Así que poniendo simplemente el código del script ya funcionaria?

[rusoftware]

Iniciado por freemanworld

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$.

[marcwolf]

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

[marcwolf]

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

[gerchulino]

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.

[kseso?]

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.