18041 sujets

Questions générales et questions de débutants

[resolu]Image PNG et IE

Bon on ne trouve pas vraiment de topic qui parle à fond de ce pb bien que beaucoup s'y attarde mais ne donne pas vraiment de solution.

Comme vous le savez comme toujours IE fait des siennes et ne supporte pas le forma PNG pour les images, si mais en y mettant un remarquabl et tres agreable cadre gris !! Ce qui se révèle très genant:
http://remi.fontan.free.fr/Site_Luc/test.htm
à visualiser avec IE il va s'en dire.

En fouinant sur la toile j'ai trouvé un scrpit JS qui devrait resoudre ce pb à en croire les forums, mais moi rien !!!étrange..
http://www.pc-tests.com/Forum/viewtopic.php?t=28598&view=previous

Pourtant je mets bien ce code ds le header:
<!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" xml:lang="fr" lang="fr">
<head>
<title>Largeur fluide, header/menu gauche/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="home3.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">
function IE_CorrectAlpha_PNG(){
for(i=0; i<document.images.length; i++){
img    = document.images[i];
imgExt  = img.src.substring(img.src.length-3, img.src.length);
imgExt  = imgExt.toUpperCase();
if (imgExt == "png"){
imgID    = (img.id) ? "id='" + img.id + "' " : "";
imgClass= (img.className) ? "class='" + img.className + "' " : "";
imgTitle= (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
imgStyle= "display:inline-block;" + img.style.cssText;
if (img.align == "left") { imgStyle = "float:left;"  + imgStyle; } else if (img.align == "right"){ imgStyle = "float:right;" + imgStyle; }
if (img.parentElement.href)   { imgStyle = "cursor:hand;" + imgStyle; }       
strNewHTML    = '<span '+imgID+imgClass+imgTitle+' style="width:'+img.width+'px; height:'+img.height+'px;'+imgStyle+';'+'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\', sizingMethod=\'scale\');"></span>';
img.outerHTML = strNewHTML;
i = i-1;
}}}
window.attachEvent("onload", IE_CorrectAlpha_PNG);
</script> 
</head>

<body>


Si vous avez une solution je suis ouvert car la je bloque pas mal !!
La vie serait tellement plus simple si tout le monde avait Firefox !!

MErci[/i]
Modifié par styx (16 Apr 2005 - 16:49)
salut,

je suis pas super calé mais c'est bien la premiere fois que j'entends parlé du fait que IE ne supporte pas les .png.

J'ai des sites utilisant des images png et ils fonctionnent aussi bien sur IE que sur FF.

D'ailleurs, en visitant ton site, j'ai les images sous IE, et seulement le probleme du cadre gris rajouté.

Peut-etre que cela vient de la version d'IE et dans ce cas desolé pour la reponse qui ne t'apportera pas grand chose (je suis sous IE 6).
Sauf erreur, IE ne gère pas la transparence du format png...donc l'image s'affiche avec une bordure grise, qui représente la transparence (correctement affichée par FF).
Bonjour,

En fait IE supporte la transparence des .png en 8bits, mais pas en .png 24bits.
Pour faire en sorte que IE supporte le .png 24bits, il y a un hack qui marche plutôt bien :

Dans l'entête de ta page tu places ce genre de code (trouvé sur http://jotbe-fx.de/daily/archives/):


<!-- The following is a conditional comment to import specific styles only for Internet Explorer which would not validate -->
<!--[if gte IE 5]>
<style type="text/css">
        @import "css/feuilledestyleIE.css";
        #nomdudiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/nomimage.png', sizingMethod='scale'); }
</style>
<!\[endif\]-->


Attention, sur la dernière ligne j'ai dû mettre des backslash (\) pour que le endif apparaisse normalement. Il faut les enlever pour que cela fonctionne.

Puis dans ta feuille de style, tu remet le code suivant :


/* Enable Alpha-PNGs in IE */

#nomdudiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/nomimage.png', sizingMethod='scale'); }


Voilà.
Avec cela chez moi ça fonctionne avec IE 5 et 6.

Voilà en espérant que cela t'aideras. Smiley smile
Modifié par Yapourha (11 Apr 2005 - 14:48)
Bon j'ai mis en resolu !!

Le script ne me plait pas trop et j'ai pas reussi à le faire marcher, sans trop me battre c'est vrai.

Bon en tout cas la meilleur solution est de mettre les images en PNG 8bits et hop ça roule !! et il n'y pas plus simple !!

Merci à tous
c'est super . . mais j'ai un problème avec le script.

j'ai mis une image png transparent en arrière plan dans un calque et du texte au dessus mais les link ne marche pas avec IE?

je suis le seul?
Non...j'ai le meme problème en fait...c'est comme si l'image se collait par dessus..

D'ailleurs si on met Jpg en bg...le problème est le même Smiley bawling

Si tu refresh très vite..tu verras que les liens sont opérationnels quelques ms...puis ne fonctionne plus...comme si l'image s'était collée par dessus...
J'essaye de trouver autre chose et je te tiens informé.
Modifié par ziad270 (01 Sep 2005 - 10:03)
Sujet clos
Aller à