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.

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

pourrais tu mettre un exemple en ligne ??
je regarde de mon coté avec un effet en dehors d'une librairie ...

**d-Rek** · 13/01/2009, 12h06

Il semblerait que la fonctionnalité intégrée à IE7 ne soit appliquée qu'au chargement de la page ou de l'image.
Effectivement, si vous changer l'opacité d'un PNG contenant un zone de transparence, on a un rendu à la IE6.
Aucune vraie solution trouvée à ce jour. (si vous trouvez, prévenez moi par MP !)

Pour faire disparaitre/apparaitre une telle image, j'ai joué avec l'opacité d'une div placée au dessus et ayant la même couleur que le fond de la page. Cette solution a ses limites.

**SpaceFrog** · 13/01/2009, 13h19

ça marche pas le coup de mettre l'image en background d'un div et de faire le fade sur le div ???

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

Envoyé par SpaceFrog

ça marche pas le coup de mettre l'image en background d'un div et de faire le fade sur le div ???

J'ai essayé si c'est un PNG 24 sur IE6 ca donne un effet tout laid, y compris avec le filter:progId

**SpaceFrog** · 13/01/2009, 13h53

arf ...
comme quoi IE 7 ou pas est egal à lui même ...

bug souvent rapproté mais rarement résolu et toujours de façon spécifique, pas de solution generalisée...

une page traitant du sujet

http://www.mozaik.com.mx/test_png/test3.html#

**le_chomeur** · 13/01/2009, 14h40

sinon faut utiliser un bon vieux jpg avec comme couleur transparente la même couleur que le fond

Sortie <=

**Tchupacabra** · 13/01/2009, 15h59

y a plus qu'à attendre IE8... en espérant que leur développeurs ont retirés leurs mouffles....

**le_chomeur** · 13/01/2009, 16h35

effectivement lien testé sous ie7 et firefox ( http://www.mozaik.com.mx/test_png/test3.html#) propre ...

**ThomasR** · 13/01/2009, 16h46

Sous IE7 et Firefox ca marche nikel, c'est plus pour le bon vieux IE6 que ca marche pas tip-top.

Effet fade PNG24 + IE7 = horrible

JavaScript

Discussions similaires

Partager

Partager