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...