Comunidad de diseño web y desarrollo en internet online

Situción con imagenes .PNG en navegadores!!! help!!!

Citar            
MensajeEscrito el 21 Dic 2008 06:31 am
Quiciera preguntar por qué el mozilla detecta la transparencia de las img. png pero el internet explorer no...

:? HAY ALGUNA FORMA DE QUE ESTO FUNCIONE...!!! Pues no quisiera cambiar el formato de la imagen para no perder calidad.

Gracias... espero su AYUDA (Si es que hay solución ha esto o si sencillamente es problema de microsoft).

Por CODE_DCD

6 de clabLevel



 

msie
Citar            
MensajeEscrito el 21 Dic 2008 06:52 am
Solo IE 6 no acepta el formato png, y si tiene solucion, debes usar solo para ie6 un filter exclusivo de microsoft

Código HTML :

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


Tambien hay un fix que ya hay por internet que se llama pngfix.js que permitira que todos los tags <img> con una imagen .png logren verse en IE6 sin que tengas que aplicar ese filtro

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Este fix en javascript te lo recomiendo si estas usando los png's directamente en etiquetas <img>

Si estas usandolo de fondo desde una hoja de estilos, usa el metodo mencionado arriba, pero recuerda que debe ser en una hoja de estilos que solo lea ie6.css y pones primero el background:none; te pongo un ejemplo, en mi hoja de estilos VALIDA, yo tengo esta clase

style.css

Código :

.logo {background:url(../images/logo.png) top left no-repeat; position:absolute; width:225px; height:91px; margin:26px 0 0 26px}


Y en la hoja de estilos ie6.css tengo lo siguiente

Código :

.logo {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png');}


Como ves en la hoja de estilos valida llamo al .png como se hace normalmente, y en la de ie6 le quito el atributo de background y aplico el filtro, una cosa que debes notar es como coloco la ruta, para la que es valida es una ruta normal porque llamo al folder images que esta un nivel mas arriba, porque mi estilo esta en una carpeta llamada "css"; sin embargo en la de IE6 la ruta es como si la estuviera llamando al mismo nivel de la pagina html.

Y por si te lo estas preguntando, para que ie6 llame a su propia hoja de estilos se agrega una condicion en el <head> cuando aplicas los estilos

Código HTML :

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->


Siempre primero se llama a la valida, y luego a la de ie6.css porque esta ultima sobreescirbira ciertas clases. La condicion saldra gris como un comentario, asi se deja.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 21 Dic 2008 08:11 am
Gracias por todo "drarock" por tu rápida respuesta ... verdaderamente te lo agradezco.
Ya lo hice y funcionó PERO....

Que hice: No1 ----- No funciona así:

Código :


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--[if IE 6] >
 <link rel="stylesheet" type="text/css" href="ie6.css" /> 
 <![endif]--> 
</head>

<body bgcolor="blue">

<img class="logo" src="a.png"> 

</body>

</html>



Y los estilos como dijistes pero nada:

Código :

 
.logo {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='a.png'); }


Tuve que quitarle la condición para que funcionara
Pero la imagen me sale repetida, o sea una sin la transparencia y otra debajo de esta misma con la transparencia, creo que pasa cuando utilizo la estiqueta...img. NO SE.

Por CODE_DCD

6 de clabLevel



 

msie
Citar            
MensajeEscrito el 21 Dic 2008 08:18 am
Como te dije el metodo de los estilso era por si lo usabas como background, si no es asi puedes usar el javascript, hace exactamente lo mismo, usa el filtro, solo que lo aplica automaticamente a tus etiquetas <img> que tienen el .png para que no lo hagas manualmente.

Si lo deseas hacer manualmente sin el javascript, hazlo asi

<img src="a.png" width="" height="" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='a.png');" alt="">
(le pones el alto y ancho de la imagen)

No se usan los dos metodos a la vez en tu caso, uno te explique para las etiquetas <img> (el .js) y el otro es cuando usas fondos con estilos.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 21 Dic 2008 08:30 am
Gracias brother era lo que había pensado hacer, no obstante pienso utilizar el filtro... ok!!!

Por CODE_DCD

6 de clabLevel



 

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.