Foros del Web » Creando para Internet » HTML »

Problemas con fotos en formato Png.

 Estas en el tema de Problemas con fotos en formato Png. en el foro de HTML en Foros del Web. Hola a todos: Tengo en mi página web fotos en formato png y consigo verlas perfectamente con Internet explorer7. Pero con uno inferior al 7 ...
  #1 (permalink)  
Antiguo 17/04/2007, 11:20
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Pregunta Problemas con fotos en formato Png.
Hola a todos:

Tengo en mi página web fotos en formato png y consigo verlas perfectamente con Internet explorer7. Pero con uno inferior al 7 no me muestra las transparencias.

Me podeis ayudar y decirme qué puedo hacer.

Gracias.
  #2 (permalink)  
Antiguo 17/04/2007, 11:24
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Re: Problemas con fotos en formato Png.
pone este script

Código HTML:
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
	     }
      }
   }
<!--
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 17/04/2007, 11:28
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Muchas gracias DragónX voy a probar a ver que tal me va.

Saludos.
  #4 (permalink)  
Antiguo 17/04/2007, 11:32
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
una cosita más dragón dónde escribo el código en el head ó en el body.
Además supongo que he de añadir <script></scrip>. ¿Es así?

Saludos.
  #5 (permalink)  
Antiguo 17/04/2007, 11:38
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Re: Problemas con fotos en formato Png.
Dentro de los tags <HEAD> ... </HEAD> ahi te lo paso completo.

Código HTML:
<!--[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]-->
Abrazo
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #6 (permalink)  
Antiguo 17/04/2007, 11:53
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Sonrisa Re: Problemas con fotos en formato Png.
Muchas gracias por tu rapidez en contestarme, ya me funciona correctamente.

Saludos.
  #7 (permalink)  
Antiguo 17/04/2007, 12:06
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Re: Problemas con fotos en formato Png.
Excelente!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #8 (permalink)  
Antiguo 20/04/2007, 09:30
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
hola otra vez

me funciona perfectamente pero cuando añado este otro script no me realiza la acccion de cambiar una foto por otra al pasar el raton por encima.

podrias ayudarme ?
por que tu script es incompalibe con este:

<SCRIPT LANGUAGE="Javascript">
<!-- - CAMBIO DE FOTO-->
<!-- Swap images
function Permut (flag,img) {
if (document.images) {
if (document.images[img].permloaded) {
if (flag==1) document.images[img].src = document.images[img].perm.src
else document.images[img].src = document.images[img].perm.oldsrc
}
}
}
function preloadPermut (img,adresse) {
if (document.images) {
img.onload = null;
img.perm = new Image ();
img.perm.oldsrc = img.src;
img.perm.src = adresse;
img.permloaded = true;
}
}
// -->
</SCRIPT>

Un Saludo
  #9 (permalink)  
Antiguo 20/04/2007, 09:56
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Re: Problemas con fotos en formato Png.
mmmm.....acá estoy medio al horno, porque no posteas este tema el Javascript seguramente ahi te puedan ayudar mucho más
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #10 (permalink)  
Antiguo 20/04/2007, 09:57
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Por cierto el script anterior lleva en el BODY ESTE COMANDO:


<a href="servicios.html" onMouseover="Permut(1,'IMG1');" onMouseout="Permut(0,'IMG1');">
<IMG SRC="fotos/maquina.png" width="196" height="195" border=0 NAME="IMG1" onLoad="preloadPermut(this,'fotos/telefono2.gif');" BORDER=0 width="167" height="186" align="left"></A>


los dos script funciona correctamente por separado.
  #11 (permalink)  
Antiguo 20/04/2007, 11:20
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
GRACIAS POR TODO

Saludo
  #12 (permalink)  
Antiguo 22/04/2007, 09:59
 
Fecha de Ingreso: noviembre-2003
Ubicación: Frente a la PC
Mensajes: 120
Antigüedad: 20 años, 4 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Intenta con esto:

Pones esto dentro el <head>
Código: 
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Luego te haces un archivo .js q se llame pngfix.js y colocas esto:

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

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
      }
   }
}
y listo! Magicamente todos los .png con transparencias q tengas se verán bien en IE..

Fuente: http://homepage.ntlworld.com/bobosola
__________________
Sin sombra no hay luz...
  #13 (permalink)  
Antiguo 24/04/2007, 03:00
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Hola Jose

He probado tu solucción y me ocurre lo mismo, es decir funciona perfectamente el mostrar las fotos con transparencia pero me anula el script de cambio de foto.

Que Hago? se te ocurre algo.

Un saludo
  #14 (permalink)  
Antiguo 24/04/2007, 08:32
 
Fecha de Ingreso: noviembre-2003
Ubicación: Frente a la PC
Mensajes: 120
Antigüedad: 20 años, 4 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Ok, te colocare lo q explican en esa pagina acerca de las imagenes cambiantes. Yo no lo he probado, pruebalo y nos cuentas como te va. Ten muy en cuenta todos los comentarios y la forma en q se debe hacer todo...

Antes q todo ya no utilizaras el pngfix como include, ahora el codigo ira todo directamente en el head y sera este:

<HEAD>

Código: 
<!--INICIO DEL CORRECTOR PNG-->



<!--[if lt IE 7]>

<script type="text/javascript">

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

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6.
{
   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 
		     var imgAttribs = img.attributes;
		     for (var j=0; j<imgAttribs.length; j++)
			 {
			    var imgAttrib = imgAttribs[j];
			    if (imgAttrib.nodeName == "align")
			    {		  
			       if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
			       if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
			       break
			    }
             }
		     var strNewHTML = "<span " + imgID + imgClass + imgTitle
		     strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + 

imgStyle + ";"
	         strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		     strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\""
		     strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id 

+"');\""
		     strNewHTML += "></span>" 
		     img.outerHTML = strNewHTML
		     i = i-1
	      }
       }
   }
}
window.attachEvent("onload", correctPNG);

function PNGswap(myID)
{
   var strOver  = "_on"
   var strOff = "_off"
   var oSpan = document.getElementById(myID)
   var currentAlphaImg = oSpan.filters(0).src
   if (currentAlphaImg.indexOf(strOver) != -1)
      oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff)
   else
      oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver)
}

</script>
<![endif]-->






<!--FIN DEL CORRECTOR PNG-->


Código: 
<!--INICIO DE LA FUNCION DE CAMBIO DE IMAGEN-->


<script language="JavaScript" type="text/javascript">
<!--
function imgSwap(oImg)
{
   var strOver  = "_on"    // IMAGEN USADA CUANDO EL RATON ESTA ENCIMA
   var strOff = "_off"     // IMAGEN NORMAL
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1) 
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}
//-->
</script>


<!--FIN DE LA FUNCION DE CAMBIO DE IMAGEN-->
</HEAD>


Ahora donde sea q vaya la imagen tendra estas caracteristicas:

Código: 
<img id="img100" src="logo_off.png" width="100" height="100" alt="a PNG logo"
	onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>

<img id="img200" src="logo2_off.png" width="100" height="100" alt="another PNG logo"
	onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>

<img id="img(N)00" src="logo(N)_off.png" width="100" height="100" alt="another PNG logo"
	onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>
El nombre logo no es necesario, podria ser cualquier nombre, lo q si es necesario según dicen ahi es q termine en "_off" para la primera y "_on" para la q cambia.

Bueno, espero te funcione, mas tarde q me desocupe un poco lo reviso y lo pruebo a ver como me fue... Suerte y cualquier cosa nos cuentas..

Un abrazo...


Página original: http://homepage.ntlworld.com/bobosola/png_mouseover.htm
__________________
Sin sombra no hay luz...
  #15 (permalink)  
Antiguo 26/04/2007, 05:57
 
Fecha de Ingreso: mayo-2006
Mensajes: 39
Antigüedad: 17 años, 11 meses
Puntos: 0
Re: Problemas con fotos en formato Png.
Grasias Jose

Lo he probado y no funciona

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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:50.