iuttu » png http://www.iuttu.com Desarrollo web Mon, 23 Jan 2012 16:52:04 +0000 en hourly 1 IE7 y los PNG semi-transparenteshttp://www.iuttu.com/2009/01/ie7-y-los-png-semi-transparentes/ http://www.iuttu.com/2009/01/ie7-y-los-png-semi-transparentes/#comments Fri, 02 Jan 2009 21:36:20 +0000 iuttu http://blog.iuttu.com/?p=99 Las ganas que teníamos todos de que llegase el soporte del formato de imagen PNG a Internet Explorer 7, y cuando llega, llega incompleto (viva Microsoft). El descubrimiento llega después de utilizar exhaustivamente mootools, haciendo aparecer de la nada capas con una imagen PNG, mientras se realiza el efecto se ve una sombra negra (depende del PNG) en la zona transparente de la imagen, hasta que se completa la animación con la opacidad máxima (100%).

Para no complicar el ejemplo y mostrar el problema de una forma más sencilla, vamos a usar un par de imágenes (gracias Arturito por tu colaboración) y el siguiente html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
<title>iuttu Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/mootools.js"></script>
<style>
#test {
background: url(IMGP1355.JPG) no-repeat; width: 300px; height: 225px;
position: relative;
}
#test img {
position: absolute; top: 60px; left: 50px;
}
</style>
 
<script type="text/javascript">
function canviarOpacidad(_acual) {
$("foto").setStyle('opacity', _acual);
}
</script>
</head>
<body>
<div id="test">
<img id="foto" src="png.png" />
</div>
 
</code>
 
<code><a href="javascript:canviarOpacidad(0);">opacidad = 0</a>
<a href="javascript:canviarOpacidad(1);">opacidad = 1</a>
<a href="javascript:canviarOpacidad(.5);">opacidad = .5</a>
</body>
</html>

Podeis ver el ejemplo aquí:

Bien, si pulsamos los dos primeros botones veremos que todo funciona de forma lógica (excepto en IE6, que no renderiza bien los PNGs de serie). Si pulsamos en opacidad cero la capa desaparece, y en opacidad uno la capa aparece, esto parece funcionar en IE7 que oculta y muestra la capa correctamente, pero, si pulsamos en opacidad .5, en IE7 parece que la capa se ve más oscura:

Pantallazo ie7 png

En fin, ahora esperar a que alguien descubra una forma de evitar esto (parece que funciona si la capa que contiene el png tiene como fondo un color plano) o a que salga el IE8 y se pongan las pilas :( :(

]]> http://www.iuttu.com/2009/01/ie7-y-los-png-semi-transparentes/feed/ 1