Archivos PNG y internet explorer

DanielLucia · #1 (**permalink**) 23/11/2005, 16:52

bueno espero que mi duda al ser resuelta ayude a otros usuarios... vamos a ver, e creado un archivo con fireworks con fondo transparente y le e dado una sombra, vale no? estos archivos al insertarlos en dreamweaver cojen los tonos de transparencia, pero al mostrarlos en ie no!! no ay ninguna manera de acerlo??
e visto algo en flash, pero por ahora flash no lo llevo bien, si flash es la unica solucion... ues tendre q ponerme!!!

gracias de antemano ;)

RoQ · #2 (**permalink**) 23/11/2005, 17:42

IE no soporta la transàrencia PNG, tienes que usar un script para que funcione, usa el buscador del foro

FuLaNo_ · #3 (**permalink**) 23/11/2005, 20:33

Como dices, puedes hacerlo en flash, simplemente debes importar tu imagen PNG y crear una pelicula, luego le agregas al codigo HTML del flash el parametro WMODE, te pongo un ejemplo de como quedaria el codigo para incorporar el flash transparente:

Código:

<object type="application/x-shockwave-flash" data="img/loader.swf" width="760" height="147" WMode="transparent">
  <param name="movie" value="img/loader.swf" />
  <param name="WMode" value="Transparent" />
</object>

Obviamente el archivo.swf y los parametros widht y height los debes cambiar por lo que tu necesites...

De esta forma obtienes un flash similar a tu imagen PNG, será transparente y, por medio de capas (<div>) puedes poner la pelicula sobre un texto, o hacerla desaparecer (con javascript).

Espero te sirva.

logamweb · #4 (**permalink**) 23/11/2005, 20:46

hum y si en lugar de exportarlacomo png , laexportas como gif ?

el formato gif , si permite transparencias y puesen el ie se ven bien ....

ojala te sirva mi consejo bye bye

K3NNY · #5 (**permalink**) 23/11/2005, 21:29

logamweb, lo que pasa es que el gif soporta transparencias de un solo color, en cambio con png podes hacer un degradado progresivo. Ademas de que el php tiene muchisima mejor calidad.

sjam7 · #6 (**permalink**) 24/11/2005, 00:13

Cita:

Iniciado por K3NNY

logamweb, lo que pasa es que el gif soporta transparencias de un solo color, en cambio con png podes hacer un degradado progresivo. Ademas de que el php tiene muchisima mejor calidad.

PHP? supongo que te refieres a PNG...

solo pon esto al inicio de tu pagina, entre las tags <head></head>:

Código:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle        
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

y pon tu PNG a ver que tal va

DanielLucia · #7 (**permalink**) 24/11/2005, 02:41

sjam7 muxisimas graciassss!!! es loq andaba buscando, muxas gracias :D:D:D

urgido · #8 (**permalink**) 24/06/2006, 23:59

Daba una vuelta y me encontre con este código GRACIAS sjam7

fer10 · #9 (**permalink**) 25/06/2006, 00:20

les dejo uno mas facil, con stylos lo malo es que no sirve para IE 5.5 para abjo

Cita:

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(enabled=true, sizingMethod=scale src='75p_honey.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(75p_honey.png);
}

fuente:http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217

sjam7 · #10 (**permalink**) 25/06/2006, 09:09

si, en mi blog tengo explicado la solucion que di arriba y una muy parecida a la comentada por fer10 aplicada a fondos por si a alguien le sirve

http://javimata.blogspot.com

gustec · #11 (**permalink**) 28/06/2006, 16:56

tuvieras que exportar la imagen desde el fireworks en .gif

pakillo · #12 (**permalink**) 22/12/2007, 10:41

Hola, no se si alguien me puede ayudar, yo utilizo este script que es muy parecido al que esta en este post, es este

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

Código:

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src='" + img.src + "', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

El problema que tengo es que utilizo un menu en java, y cuando lo quito me funciona este script para los png pero si vuelvo a colocar el menu, deja de funcionar y los png se ven mal, el menu tiene este codigo.
No me deja enviar el otro codigo proque es muy largo

bueno queria saber si eso tendria algo que ver

webdesigne84 · #13 (**permalink**) 14/02/2009, 21:00

Hola, he utilizado el codigo porque tenia el mismo problema aunq solo en versiones antiguas de ie, ahora se ha solucionado a medias, ya que al acceder a la web durante unos segundo se ve el fondo azul, aunque luego se quita, que puedo hacer??mil gracias
un saludo