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

Archivos PNG y internet explorer

Estas en el tema de Archivos PNG y internet explorer en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/11/2005, 16:52
Avatar de DanielLucia  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz (España)
Mensajes: 170
Antigüedad: 12 años
Puntos: 0
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 ;)
  #2 (permalink)  
Antiguo 23/11/2005, 17:42
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
IE no soporta la transàrencia PNG, tienes que usar un script para que funcione, usa el buscador del foro
  #3 (permalink)  
Antiguo 23/11/2005, 20:33
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
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.
__________________
I Love Programming...
  #4 (permalink)  
Antiguo 23/11/2005, 20:46
Usuario baneado!
 
Fecha de Ingreso: abril-2004
Ubicación: peru _ chimbote
Mensajes: 518
Antigüedad: 13 años, 7 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 23/11/2005, 21:29
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 24/11/2005, 00:13
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #7 (permalink)  
Antiguo 24/11/2005, 02:41
Avatar de DanielLucia  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz (España)
Mensajes: 170
Antigüedad: 12 años
Puntos: 0
sjam7 muxisimas graciassss!!! es loq andaba buscando, muxas gracias :D:D:D
  #8 (permalink)  
Antiguo 25/06/2006, 00:59
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
Daba una vuelta y me encontre con este código GRACIAS sjam7
__________________
Hospedaje Web al mejor costo!
  #9 (permalink)  
Antiguo 25/06/2006, 01:20
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
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
__________________
Saludos
FT.
www.fernando.com.mx
  #10 (permalink)  
Antiguo 25/06/2006, 10:09
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #11 (permalink)  
Antiguo 28/06/2006, 17:56
 
Fecha de Ingreso: junio-2006
Mensajes: 19
Antigüedad: 11 años, 5 meses
Puntos: 0
tuvieras que exportar la imagen desde el fireworks en .gif
  #12 (permalink)  
Antiguo 22/12/2007, 10:41
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 6 meses
Puntos: 0
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
  #13 (permalink)  
Antiguo 14/02/2009, 21:00
 
Fecha de Ingreso: agosto-2008
Mensajes: 28
Antigüedad: 9 años, 3 meses
Puntos: 0
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
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




La zona horaria es GMT -6. Ahora son las 21:59.