Les enfants, je viens de faire une découverte atroce et j'aurais besoin de confirmation.

Les chouettes effets de transparence des png semblent ne pas passer sous IE...


EDIT
~ lien obsolète

Dites-moi si vous avez un joli cadre comme ça (comme sous Firefox) :

ou une horreur avec du bleu laid...

Avec du GIF c'est moche aussi, y'a pas de transition dégradée, on passe direct du blanc au transparent.

Saleté de logiciel de mon cul.

Je vois le "joli cadre" et en tout cas il est loin d'etre bleu.

IE 6 pour moi.
_________________

Mieux Comprendre le Jeu Vidéo
https://ecranpartage.ca/

ah ben j'ai testé sous IE 6 et j'obtiens ça :

Bon je suis pas sous windows mais je confirme, IE ne gere pas la transparence des PNG, c'est un truc qu'on lui reproche assez souvent.

de toute façon le png c'est pas fait pour le web, ou alors juste des petits trucs minuscules de 10*10 pixels, c'est vraiment lourd comparé à des formats de compressions destructeurs (jpeg, gif...) pour une précision d'image dont on a pas vraiment besoin sur le web.

ben c'est con il se trouve que j'en ai besoin, et qu'aucun autre format ne fait ce que fait le png (en plus il est libre, pas comme le gif).

Si j'étais un gros rat je mettrais un logo "only for Firefox" tiens.

En l'occurence ça serait pas "only for firefox" mais "only for W3C compatible browser", la gestion de la transparence des png fait partie des normes du web qu'un navigateur est supposé respecter, et effectivement tous les browsers un peu recent le gere parfaitement, opera, safari, konqueror, netscape... et puis avec tous ces sites "optimisés pour internet explorer" (le mot "optimisé" me fait bien marrer, si le site est compatible qu'avec internet explorer c'est justement qu'il est pas optimisé mais codé avec les pieds par une feignasse fini). ça donnerait un peu le change.

de toute façon c'est la politique microsoft, d'un côté il y a la norme "de droit", celle du W3C, organisme chargé de définir les normes du web, et de l'autre côté la norme "de fait", que microsoft fait tout pour imposer (frontpage...) puisque plus ils pourront contrôler les normes, plus ils pourront rendre les produits concurrents incompatible avec elles. et ça s'applique à d'autres domaine que le web.

c'est faisable de mettre un script qui switcheriat l'image en fonctione du navigateur détecté ?

Genre "je suis sous IE" -> gif , "je suis sous un vrai navigateur" -> PNG ?

Ouais, mais faut avoir du courage vu le bordel que sont les user agent thoses days...

IE s'identifie comme étant un mozilla et firefox comme étant un "IE qui se fait passer pour mozilla"... le seul qui s'identifie comme étant un vrai IE est opera... va comprendre... enfin sinon c'est faisable, juste que faut pas chercher à comprendre la logique du rapport entre l'user agent string et le navigateur derriere...

ah merde...

Donc j'aurais beau tenter de faire un switch, la plupart des gens n'en profiteront pas ?

Saleté d'IE de merde.

Je les hais encore plus depuis aujourd'hui.

C'est parametrable ça. Moi j'ai regle en identifiant comme Opera.
Le cadre passe niquel sous opera donc. Et oui c'est possible de faire si IE -> gif sinon -> PNG
_________________

PV -> nan mais chaque navigateur déclare des noms fantaisiste mais chacun se declare de maniere unique... par exemple tu sais que si un navigateur se declare comme étant mozilla c'est internet explorer, et que si il se declare comme internet explorer c'est firefox... donc si l'user agent est "IE" tu envoi la page firefox, si l'user agent est "mozilla" tu envoi la page IE...

Mais IE par défaut fait quoi ? Il s'identifie vraiment comme Mozilla ?

Parce que je dois penser aux visiteurs novices qui n'auront rien touché à leur IE de merde...


[EDIT]
ah ok, c'est super logique en fait.

Et ça se fait comment un tel script ?
Je ne connais que le code html de base, et je pensais que ça me suffirait à afficher fièrement ce logo :

Si tu es sûr que seul IE ne gère pas le png, tu peux faire un test de ce style :
http://www.irt.org/script/459.htm

Notes :
- je n'ai pas testé ce script mais personnellement, j'ajouterais à la suite une balise NOSCRIPT comprenant le code HTML destiné aux navigateurs ne gérant pas les scripts.
- le script indiqué ne teste pas la version d'IE. Pour un test plus détaillé, étudie l'objet "navigator" de javascript.

Mais il y a un truc qui m'échappe. Tu as écrit un peu plus haut :

Si seul le format PNG répond à tes besoins, à quoi bon tester le navigateur ?

je viens de tester ce script et ça marche sous IE :

if (navigator.platform == "Win32" && navigator.appName == "Microsoft

Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}

function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/.png/i) != null){
var mypng =

bg.substring(5,bg.length-2);
document.all[i].style.filter =

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"',

sizingMethod='scale')";
document.all[i].style.backgroundImage =

"url('/assets/images/x.gif')";
}
}
}
}



et même que Firefox ne semble pas gêné.

Je regarde ton tien (si ça se trouve c'est le même )

ça marche chez vous ?

EDIT
~ lien obsolète

Euh, non, en fait, celui que j'indiquais a un avantage : il est assez simple pour que je le comprenne !


Esthétiquement, le rendu est le même chez moi sous IE6 et FF1.
En revanche, le texte de ta page n'est pas sélectionnable à la souris sous IE6 (mais avec Ctrl + A, ça fonctionne). Ton script afficherait-il l'image "de fond" au dessus du texte ?

Âne et Fée, j'ai constaté ça ce soir en testant mes pages.

Visuellement c'est super, en termes pratiques c'est très con.

Comment je peux voir si l'image est posée au dessus par le script ?


Voici le script :

Sinon, j'ai pas dû me servir du détecteur de navigateur ci-dessous comme il faut : ça ne marchait pas chez moi.



Sachant que sur ma page c'est pas un BODY background mais un TABLE background, et que j'ai plusieurs tables, est-ce vraiment fonctionnel ?

Que dois-je mettre dans le code pour que le script "sache" où intervenir ? Faut-il mettre quand même le code d'origine pour la background ?

(désolé, je suis plus que newbie en javascript )

Bon, je ne suis pas une bête en javascript, mais voilà les différences que je vois entre le code que je t'indiquais (que j'appellerai ici, pour plus de facilité, "mon code") et celui que tu as utilisé ("ton code") :

1. Apparemment, "ton" code permet d'utiliser, même avec IE, une image PNG transparente. La méthode progid:DXImageTransform.Microsoft.AlphaImageLoader permettant d'appliquer à cette image le fameux effet de transparence recherché.
Le code que je te proposais permet quant à lui de choisir, en fonction du navigateur, l'image à utiliser (dans ton cas, un GIF pour IE, un PNG pour les autres navigateurs).

2. La méthode progid:DXImageTransform.Microsoft.AlphaImageLoader utilisée dans "ton" code nécessite IE 5.5 ou supérieur. Un utilisateur sous IE 5.0 ne profitera donc pas de l'effet de transparence. Plus de détails ici (voir le paragraphe "Compatibility").
"Mon" code, parce qu'il est basique, devrait a priori fonctionner avec toutes les versions d'IE gérant le javascript (je dis bien "a priori" car je n'ai pas d'anciennes versions d'IE à disposition pour tester).

3. "Ton" code "recherche" toutes les images PNG utilisées comme background dans ta page pour leur appliquer l'effet de transparence.
"Mon" code, lui, doit être répété à chaque fois que tu utilises une image PNG.

Maintenant, je ne sais toujours pas pourquoi l'image se retrouve au dessus du texte avec "ton" code (je rappelle d'ailleurs que ce n'est qu'une hypothèse).
En outre, je ne comprends pas la ligne
document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
Elle fait référence à une image x.gif que tu ne sembles pourtant pas utiliser.

En conclusion, "ton" code m'a l'air particulièrement intéressant car il résout la question des PNG sous IE 5.5 (et +) plutôt que de les remplacer par des GIF. De plus, il le fait "tout seul" sans que tu aies à intervenir sur chaque balise TABLE de ta page HTML.
Le souci avec ce code, c'est que comme je ne le comprends pas dans le détail (surtout à cette heure), je ne peux pas beaucoup plus t'aider à comprendre son fonctionnement.

Pour en revenir à tes questions :

Ca demande juste d'adapter le code en remplaçant BODY par TABLE, ça n'est pas là le souci, mais...


... c'est plutôt là que le bât blesse. Tu dois, comme je l'expliquais plus haut, placer ce code à chaque occurrence d'un PNG dans ton code HTML.
Pour faire simple, disons que la méthode document.write écrit du code HTML. Ainsi, plutôt que d'écrire ta balise TABLE, tu places le script, qui décide, en fonction du navigateur, de la balise TABLE à écrire.
Note : puisque c'est le javascript qui va écrire la balise TABLE, il faut prévoir le cas où le navigateur ne gère pas les scripts. On ajoute donc une balise NOSCRIPT, qui contient le code HTML à exécuter par défaut.

Un exemple pour mieux comprendre :

********* Début de l'exemple *********

<HTML>
<BODY>

<!--1er tableau : on applique le script-->
<SCRIPT LANGUAGE="JavaScript"><!--
if (navigator.appName == 'Microsoft Internet Explorer')
document.write('<TABLE BACKGROUND="image.gif">');
//le script "écrit" la balise TABLE destinée à IE
else
document.write('<TABLE BACKGROUND="image.png">');
//le script "écrit" la balise TABLE destinée aux autres navigateurs
//--></SCRIPT>

<NOSCRIPT>
<TABLE BACKGROUND="image.png">
<!--Cette balise TABLE sera lue par les navigateurs ne gérant pas les scripts-->
</NOSCRIPT>

<TR><TD>tableau 1</TD></TR>
</TABLE>

<!--2e tableau : on applique à nouveau le script-->
<SCRIPT LANGUAGE="JavaScript"><!--
if (navigator.appName == 'Microsoft Internet Explorer')
document.write('<TABLE BACKGROUND="image.gif">');
//le script "écrit" la balise TABLE destinée à IE
else
document.write('<TABLE BACKGROUND="image.png">');
//le script "écrit" la balise TABLE destinée aux autres navigateurs
//--></SCRIPT>

<NOSCRIPT>
<TABLE BACKGROUND="image.png">
<!--Cette balise TABLE sera lue par les navigateurs ne gérant pas les scripts-->
</NOSCRIPT>

<TR><TD>tableau 2</TD></TR>
</TABLE>
</BODY>
</HTML>

********* Fin de l'exemple *********

A noter que cette technique utilise donc le format PNG et le format GIF. A toi de voir si ça te convient puisque tu ne semblais pas emballé par l'idée d'utiliser du GIF.

Voilà ! Hope this helps, comme on dit.

Merci beaucoup pour ces éclaircissements !

L'idéal serait de pouvoir afficher correctement la transparence PNG, mais si c'est trop galère, ta solution de switch est parfaite !
Dans ce cas les VRAIS navigateurs auront le VRAI design, et IE aura ce qu'il peut afficher... (je pourrais toujours bidouiller un GIF ou un JPEG pour simuler une transparence ; on verra des défauts mais ça fera un peu illusion)

J'ai plus qu'à apprivoiser le javascript.

En tout cas je mettrai un putain de message d'avertissement sur le W3C en page d'accueil, pour obli... inciter les gens à utiliser autre chose qu'IE.