Effet fade PNG24 + IE7 = horrible
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:
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... :langue:
Quelqu'un aurait-il une astuce pour rendre cet effet acceptable sous IE7 ? :help:
Merci d'avance... :roll:
personne n'as trouvé la solution ?
Bonjour,
je suis face au même problème. As tu trouvé une solution ? Personne ici n'as trouvé ? :cry:
Merci d'avance
Trenkwill
