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