png transparente en explorer

16.Sep.2007
3 Comentarios
Responder
trackback

Llevo mucho tiempo aplicando soluciones mas o menos ortodoxas para solucionar el bug que tiene explorer a la hora de pintar png transparentes.
Hay muchas webs que han planteado soluciones a este problema con mayor o menor exito, pero con este articulo pretendo solucionar de una vez por todas una duda que mucha gente tienen rondando por la cabeza…¿Uso imagenes en formato png en explorer? SI

Solución #1

La primera solción que encontré y la que llevo usando mas tiempo es la utilización de este js. qu basicamente se encarga de recorrer todas los elementos con la etiqueta img y aplicarles el famoso filtro..

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png');

En principio es interesante, pero llegado el momento de utilizar imagenes png como fondo (background) no nos funciona.
En caso de utilizar el codigo/concepto superior tendríamos que generar 2 estilos diferentes, uno para firefox y otro para explorer con una forma similar a esta:
recorrer todas los elementos con la etiqueta img y aplicarles el famoso filtro..

.logo{
	width:200px;
	height:200px;
	 /* Mozilla no hace caso de esta cantidad
             de mierda necesaria en explorer */
	filter:progid:DXImageTransform.Microsoft.
        AlphaImageLoader(src='imagen.png');
}
.logo[class]{
	background:url(’bg_t.png’);
}

La primera class vale para explorer, pero necesitamos forzar la imagen de fondo para el resto de navegadores, por lo que con la segunda class eso quedaría resuelto.

Estas soluciones no son… “malas” pero necesitaba una solución menos “engorrosa”.

Solución #2 (buena)

Esta solución es mas sencilla pero require de algo mas de preparación.
Esto es lo que necesitais

  1. iepngfix.htc
  2. blank.gif
  3. algo de css… :)

El css que necesitareis incluir será el siguiente:

img { behavior: url(iepngfix.htc); }

Desde ese momento todas los elementos con nombre img (las imagenes) pasaran por la piedra, digo… behaivor con su pertinente funcionamiento en explorer.

- Pero… yo lo que tengo esa una imagen en png, pero la tengo como fondo de un div con id contenedor, ¿Qué hago?

#contenedor{background:url('fondo_de_mi_web.png');}

#contenedor,img { behavior: url(iepngfix.htc); }

Todos los elementos img y #contenedor pasaran por el behaivor.

Tanto con la solución 1 como con la 2, tenemos un problema insolucionable (a mi entender). En el caso de querer un png de fodo con repetición en explorer. El filtro de explorer encargado de solucionar este problema no nos permite definir repetición x o y, por lo que en esos casos tendremos que encontrar una solución alternativa en cuanto a diseño.

Espero que os sirva de algo el pequeño tutorial.

blog code portfolio feed flickr

¿Donde estoy?



Hace muy poco



  • Segunda Fiesta en FOX
  • Kevin Rose, DiggNation en Directo
  • DiggNation
  • DiggNation
  • FreeBeer by Google
  • Emo Programming
  • Manuales y Manuales
  • Talent!

3 Comentarios

  1. Desde luego una gran solución para aquellos que diseñamos y nos preocupamos de que las cosas se vean en el maldito explorer… Porque no todo el mundo usa Firefox.

    Thanks neo!

  2. daniel

    Yo tambien uso la solucion 2 pero cuando hay una etiqueta a no funciona la misma , es decir no s epuede hacer click
    =(

  3. ana

    Hola, yo también uso la segunda, pero tengo un problema solo me funciona si exporto el png con 8 colores, con 24 (que es como mejor se ve) no funciona. No se si sabeis algún truco para esto ya que de esta manera se ve la transparencia pero con muy mala calidad cuando hay un color de fondo diferente al blanco.

    Gracias!

Incoming Links

Deja tu granito de arena

Tag Cloud

abrazos ajax apache aplicaciones Apple arduino blogak Ciencia code consolas crack crossover css Curiosidades day debian desarrollo devc++ disco diseño DRM duro euskal euskalparty examenes explorer fiestas flickr fonera fonera wifi fotos fowa frases freak geek Geeks General google independence java javascript juegos leopard Linux mac macbook pro mldonkey musica mysql NAS osx OS X padre de familia Paranoias php png Programación prototype psp python rol SGAE simplebd software subversion tecnología themes Universidad virus Web2.0 wifi wii consolas windows wireless wordpress wow xajax youtube

Archivo mensual