Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Diseño web (http://www.forosdelweb.com/f91/)
-   -   Archivos PNG y internet explorer (http://www.forosdelweb.com/f91/archivos-png-internet-explorer-352432/)

DanielLucia 23/11/2005 16:52

Archivos PNG y internet explorer
 
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 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_ 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 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 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 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...:-D

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 24/11/2005 02:41

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

urgido 24/06/2006 23:59

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

fer10 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 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 28/06/2006 16:56

tuvieras que exportar la imagen desde el fireworks en .gif

pakillo 22/12/2007 10:41

Re: Archivos PNG y internet explorer
 
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 14/02/2009 21:00

Respuesta: Archivos PNG y internet explorer
 
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


La zona horaria es GMT -6. Ahora son las 11:45.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.