Discussion :

[GiPou31]

Bonjour

J'ai un problème avec les images PNG sous IE6
Le problème est bien connu et j'ai lu les nombreux posts sur le sujet mais je ne trouve pas mon erreur !

En local (je travaille avec WAMPSERVER) et cela marche parfaitement
Par contre, en ligne, cela ne marche pas !
Voir ici http://www.rollersisters.com/aide/ro.../2-photos.html avec Internet Explorer

Dans le fichier PHP, affichage des images :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<ul>
	<li><img class="png32" src='/obj/images/ico_ph_premier.png' alt='' title=''/> Affiche la première photo de la galerie,</li>
	<li><img class="png32" src='/obj/images/ico_ph_precedent.png' alt='' title=''/> Affiche la photo précédente dans la galerie,</li>
	<li><img class="png32" src='/obj/images/ico_ph_deb.png' alt='' title=''/> Lance le diaporama (les photos défilent automatiquement),</li>
	<li><img class="png32" src='/obj/images/ico_ph_fin.png' alt='' title=''/> Arrête le diaporama,</li>
	<li><img class="png32" src='/obj/images/ico_ph_suivant.png' alt='' title=''/> Affiche la photo suivante dans la galerie,</li>
	<li><img class="png32" src='/obj/images/ico_ph_dernier.png' alt='' title=''/> Affiche la dernière photo de la galerie.</li>
</ul>

Le fichier css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.png32
{
	border:none;
	behavior: url("/obj/css/png_behavior.htc");
	width:32px;
	height:32px;
}

Fichier pbg_behavior.htc :

Code javascript :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
 
/*
 * PNG Behavior
 *
 * This script was created by Erik Arvidsson (<a href="http://webfx.eae.net/contact.html#erik" target="_blank">http://webfx.eae.net/contact.html#erik</a>)
 * for WebFX (<a href="http://webfx.eae.net" target="_blank">http://webfx.eae.net</a>)
 * Copyright 2002-2004
 *
 * For usage see license at <a href="http://webfx.eae.net/license.html" target="_blank">http://webfx.eae.net/license.html</a>
 *
 * Version: 1.02
 * Created: 2001-??-?? First working version
 * Updated: 2002-03-28 Fixed issue when starting with a non png image and
 *                      switching between non png images
 *          2003-01-06 Fixed RegExp to correctly work with IE 5.0x
 *          2004-05-09  When printing revert to original
 *
 */
 
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
 
var realSrc;
var blankSrc = "/obj/images/rs_vide.gif";
var isPrinting = false;
 
if (supported) fixImage();
 
function propertyChanged() {
if (!supported || isPrinting) return;
 
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
 
function fixImage() {
// get src
var src = element.src;
 
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
 
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
 
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
 
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
 
function afterPrint() {
isPrinting = false;
fixImage();
}
 
</script>
</public:component>

J'ai essayé plusieurs choses parce que je pensais que cela venait du chemin pour le fichier :
var blankSrc = "/obj/images/rs_vide.gif";
var blankSrc = "rs_vide.gif"; (en mettant le fichier dans le même répertoire que le fichier png_behavior.htc)

Merci pour votre aide

GiPou31

[jackb6]

essaye donc avec iepngfix.htc, chez moi cela fonctionne nickel avec le fichier blank.gif en plus.

[Candygirl]

Dans ton cas, tu ne devrais pas t'ennuyer avec des solutions pour la transparences progressives (qui peuvent poser parfois des problèmes) puisque tu n'en as pas besoin avec un fond gris uni. 2 options qui te permettront de te passer de javascript:

1) réexporter tes images en png-8 avec la bonne couleur de détourage

2) Définir dans ton fichier png actuel quelle couleur de fond IE6 appliquera au lieu de son gris par défaut (tu peux le faire à l'aide de tweakPNG par exemple; si tu veux plus d'infos, fais-le moi savoir)

[Erwan31]

tweakPNG par exemple; si tu veux plus d'infos, fais-le moi savoir)

Hello,
pour info il y a aussi PNG OUT qui en plus de supprimer le gamma,
optimise aussi le poids du fichier.
Sinon il y a cet excellent outil de conversion.

[Candygirl]

Hello,
pour info il y a aussi PNG OUT qui en plus de supprimer le gamma,
optimise aussi le poids du fichier.
Sinon il y a cet excellent outil de conversion.

Ah oky merci je vais tester. Perso je passais pas tweakpng pour virer le gamma (ou définir la couleur de fond) puis pngoptimizer pour le poids

[GiPou31]

tout d'abord merci pour vos réponses et conseils

Lorsque j'ai vu que mes png n'étaient pas correctement pris en compte avec IE6 (évidemment au dernier moment lors de la mise en ligne de mon site !), j'ai paré au plus pressé et retraité mes png pour leur mettre une couleur de fond égale à celle de ma page (mes boutons du Diaporama sur fond bleu clair par exemple)

J'ai laissé ceux de la page aide (ici http://www.rollersisters.com/aide/ro.../2-photos.html) comme témoin du dysfonctionnement pour essayer de trouver une explication.

Je voudrais savoir pourquoi ça marche en local avec png_behavior.htc et Wampserver et pas en ligne. Cela peut-il venir de la configuration du serveur ?
Est-ce que cela ne marche que dans l'environnement Windows et pas Linux ?
(pour info, mais vous l'aurez compris, je suis plutôt débutant, et il s'agit de mon premier site !)

Je n'ai pas eu le temps pour l'instant de tester iepngfix.htc proposé par jackb6
Mais je pense que cela doit être une solution proche de celle que j'ai utilisé

C'est donc surtout de la curiosité technique qui motive mon post ici (j'aime bien comprendre !) Et puis je me disais que ce n'était pas une solution de créer mes boutons avec la couleur d'arrière plan de mes pages car si je veux changer un jour, il faudra refaire mes boutons ! sauf peut-être avec les retraitements donc parle CandyGirl car j'avoue ne pas être très compétent sur le traitement des fichiers images !!! (je ne connaissais pas tweakpng, pngoptimiser...)
J'ai juste utilisé GIMP2 pour retraiter mes png, et faire ma bannière
Et mes photos et autres images sont réduites avec Xnview
D'ailleurs, si vous avez des conseils ou des critiques par rapport à mes images, boutons... (pour l'optimisation, la qualité...) je suis d'ailleurs très intéressé !!!
N'hésitez pas...

Merci

GiPou31