11523 sujets

JavaScript, DOM et API Web HTML5

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 :
<!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... Smiley fache

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

Merci d'avance... Smiley biggrin
Modifié par Tchupacabra (28 Oct 2008 - 15:34)
Bonjour,

Je crois que c'est un effet de PNG-24 avec zones translucides + filtre d'opacité dans IE. Rien à y faire à ma connaissance, sauf éviter ce genre de situation.

Ce que je vérifierais tout de même à ta place, c'est s'il y a une différence entre filter: Alpha(opacity=N) et filter: progid:DXImageTransform.Microsoft.Alpha(opacity=N). La première notation date d'IE4, et la deuxième d'IE5.5. Il faudrait vérifier s'il s'agit de la même fonction, renommée à partir d'IE5.5, ou d'un mécanisme différent. Si c'est un mécanisme différent, il se peut que l'effet indésirable que tu constates ne se produise pas avec le deuxième mécanisme (plus récent).

Pour référence:
http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx
Modifié par Florent V. (28 Oct 2008 - 19:07)
merci Florent V. pour ta réponse.

je viens de tester :
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 + ")";
	object.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
}


Le résultat est identique... Smiley decu

Cela signifie qu'il n'y a pas de solution ? Smiley sweatdrop
Tchupacabra a écrit :
Cela signifie qu'il n'y a pas de solution ? Smiley sweatdrop

À priori, oui. Pas le temps ou l'envie de faire une recherche approfondie, cependant.
Ie7 ne supporte pas la transparence sur les png, c'est à dire soit on utilise la transparence, soit le png transparent mais les deux ça marche pas.

Il y a cependant deux solutions :
1. Utiliser un background à l'élément transparent, bien évidement on perd une partie de l'intérêt du png, à noter que c'est aussi une solution pour les problèmes avec les polices clear type et la transparence.
2. Utiliser, pour ie7 le même script ou behavior souvent appeler png_ie qui permet le support du png pour ie6, cette solution à l'avantage de fonctionner aussi pour ie6. A noter que selon les images le résultat peut être surprenant.
Modifié par matmat (29 Oct 2008 - 16:53)
Florent V.

Florent V. a écrit :

À priori, oui. Pas le temps ou l'envie de faire une recherche approfondie, cependant.
bah, quand tu auras le temps, n'hésite pas ! Smiley lol

matmat :

matmat a écrit :
Ie7 ne supporte pas la transparence sur les png, c'est à dire soit on utilise la transparence, soit le png transparent mais les deux ça marche pas.
oui en gros : IE7 ne gère pas l'opacité d'un PNG24.

matmat a écrit :
1. Utiliser un background à l'élément transparent, bien évidement on perd une partie de l'intérêt du png, à noter que c'est aussi une solution pour les problèmes avec les polices clear type et la transparence.
que veux-tu dire plus précisément... ?

matmat a écrit :
2. Utiliser, pour ie7 le même script ou behavior souvent appeler png_ie qui permet le support du png pour ie6, cette solution à l'avantage de fonctionner aussi pour ie6. A noter que selon les images le résultat peut être surprenant.
je pense que ce script est inutile pour IE7...

Smiley murf
Tchupacabra a écrit :
que veux-tu dire plus précisément... ?
Que si ton élément qui contient ton png à un background-color, ie7 intègre l'image a ce background donc ça marche.

Tchupacabra a écrit :
je pense que ce script est inutile pour IE7...
bè justement dans ce cas là il est utile

Regarde ce test http://www.mozaik.com.mx/test_png/test.html, le dernier ( With Png Filter ) est le seul qui marche.
Dans le test tu vois aussi que l'exemple 2 avec le background marche aussi par contre tu ne vois plus ce qu'il y a derrière l'image, donc c'est surement pas la solution à ton problème. Par contre c'est souvent la solution à d'autre problèmes c'est pour cela que j'en parle.

Dans le test tu vois aussi que le résultat n'est pas parfait avec ie7 selon les images. J'ai mis une images avec plein de transparence pour accentuer les défauts. Il y a un espèce "d'écrasement partiel de la transparence", mais c'est déjà moins horrible que l'exemple 1.

A noter que Google Chrome souffre du même problème qu'ie7 (en blanc au lieu du noir, pratique Smiley fache ) Donc pour conclure le mieux reste d'éviter la transparence sur les images png.
Modifié par matmat (30 Oct 2008 - 17:24)
Sujet clos
Aller à