Effet fade PNG24 + IE7 = horrible

**Tchupacabra** · 28/10/2008, 15h21

Bonjour � tous,

je viens de m'apercevoir de la m�diocrit� d'IE7 � effectuer un effet fade sur un PNG24.
Sous Firefox avec jQuery, un fadeOut sur une image PNG ayant un d�grad� de transparence fonctionne parfaitement mais pas sous IE7.
J'ai donc pens� que c'�tait jQuery... mais nan ! (apr�s fonction autonome ci-dessous)

Voici mon code test utilisant ou non jQuery :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<title>test fadeout png</title>
 
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	$('#fadeout').click(function() {
		$('#fadeout').fadeOut();
	})
})
function fade(id, opacStart, opacEnd, millisec){
	var speed = Math.round(millisec / 100);
	var timer = 0;
 
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}
 
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}
-->
</script>
</head>
 
<body>
 
<img id="fadeout" src="image.png" alt="" onclick="fade('fadeout',100,0,2000)" />
 
</body>
</html>

Donc les curieux verront que sous IE7, la zone du d�grad� de la transparence du PNG24 est opaque et noire...

Quelqu'un aurait-il une astuce pour rendre cet effet acceptable sous IE7 ?

Merci d'avance...

**trenkwill** · 12/01/2009, 16h12

Bonjour,

je suis face au m�me probl�me. As tu trouv� une solution ? Personne ici n'as trouv� ?

Merci d'avance

Trenkwill

**SpaceFrog** · 12/01/2009, 16h14

A ce que je vois IE n'a pas fait beaucoup de progr�s sur la gestion de la transparence de png

essayez de mettre le png en background de l'objet qui subit le fade ...

**ThomasR** · 13/01/2009, 10h49

Bonjour,

J'ai eu le m�me probl�me et il apparait qu'il n'y a pas de solution, personnelement j'ai finalement d�cid� de mettre un background css avec la propri�t� filter:alpha..

**le_chomeur** · 13/01/2009, 11h25

pour ie essaye de remplacer ta balise image par ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<span style="width:XX px;height:XX px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url du png', sizingMethod='scale');"></span>

les �l�ments en verts sont a remplac� par tes propri�t�s

**ThomasR** · 13/01/2009, 11h29

Justement avec ce filtre l'effet fade de Jquery est vraiment trop laid.

Effet fade PNG24 + IE7 = horrible

JavaScript

Vue hybride

Discussions similaires

Partager

Partager