Version complète: sur le forum Webmaster Hub : internet explorer et png
Webmaster Hub > Informatique & Internet > Les Navigateurs
notezik
Saviez vous que la transparence dans le format png n'était pas gerée par internet exploreur, du coup je suis obligé de dire aux visiteurs qu'ils sont obligés d'installer firefox ( chose qui n'est pas un mal mais c'est génant). Allez voir http://www.notezik.com. Je l'ai fait sous dreamweaver en visualisant avec le renard et surprise quand je l'ai tester avec internet explrer...
xgamer
tu peux utiliser le format .GIF dont la transparence est gérée par IE
et j'ai entendu parler d'une techinique qui utilise le CSS pour retablir la transparence dans les PNG sous IE
spoutniknak
Avec du JS
http://www.google.be/search?hl=fr&q=pn...oogle&meta=
petit-ourson
Ca fonctionne avec IE 7 il me semble.

Le javascript proposé ci-dessus pour IE 6.

Avec cela tu as balayé la quasi-totalité de la famille des Internet Explorer (surtout quand IE7 sera automatiquement mis à jour sur les machines des utilisateurs).

Enfin, on verra d'ici quelques semaines si IE7 remplace (en majorité) IE6.
notezik
ca marche même pas avec ie 7!!!
merci
même si j'ai du mal à comprendre l'anglais en plus je suis très mauvais en informatique. Il faut que je mette un code sur ma page?
birdyman
Salut,

Juste une petite remarque, a mon avis tu prend un peu le problème a l'envers, vis a vis de tes visiteurs.

C'est a toi d'adapter le site pour que ça fonctionne, et non au visiteur de changer de navigateur.
Dudu
Salut

Oui ça fait longtemps qu'on s'arrache les cheveux avec Internet Explorer et sa gestion quasi-nulle de la transparence sur le format PNG-24 (le PNG-8 est lu sans aucun souci en revanche).

Plusieurs solutions:
  • Le javascript PNG Fix
  • utiliser deux images, une au format GIF qui soit pas trop mal, et une au format PNG qui sera idéale puis écrire ceci dans ta CSS
    CODE
    #id {background: url(path/to/image.gif)}
    body>#id {background: url(path/to/image.png)}
  • Toujours en utilisant les deux images GIF et PNG, lier l'image avec <img src="/image" ../> sans préciser la terminaison, Apache va gérer tout seul quelle image envoyer selon ce que le navigateur envoie dans HTTP_ACCEPT
  • Une solution en PHP (et en anglais)
  • un autre javascript : PNG Behavior
Cariboo
Voila la méthode implémentée par ARNO de l'équipe de développement de SPIP que j'ai testé avec succès.

En effet les filtres "image" de spip génèrent des png avec une transparence alpha, ils font donc changer le "comportement" d'IE pour qu'il gère correctement la transparence alpha.

La méthode utilisée est la même que le PNG behavior proposé par Dudu, sauf que c'est expliqué en français.

Afficher-du-PNG-24-dans-MSIE

Voila le code du fichier htc utilisé :

CODE
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "rien.gif";

if (supported) fixImage();

function propertyChanged() {
    if (!supported) 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) {
        element.src = blankSrc;
        return;
    }

    if ( ! new RegExp(blankSrc).test(src)) {
        // backup old src
        realSrc = src;
    }

    // test for png
    if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
        // set blank image
        element.src = blankSrc;
        // set filter
        element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
            src + "',sizingMethod='image')";
    }
}

</script>
</public:component>


Cela fonctionne parfaitement avec les différentes versions d'IE que j'ai testées (5.5, 6 et 7).
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.