28220 sujets

CSS et mise en forme, CSS3

Png et internet explorer

bonjour
un peu embêtant cette histoire d'internet explorer qui ne gère pas les PNG

pour palier ce problème j'ai mis du javascript sur mon site (parce que je n'ai trouvé que cette solution) et elle marche ... mais ...



var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var 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
      }
   }
}



mais bon je suis obligé également de placer ça dans la partie php 

<script defer type="text/javascript" src="pngfix.js"></script>



le truc c'est que j'aimerais bien placer "<script defer type="text/javascript" src="pngfix.js"></script>" dans la feuille de style Smiley murf
mais je ne sais pas comment.

si vous avez une idée plus simple je suis preneur !
si je pouvais éviter de passer par le javascript également

merci ![/i]
Modifié par trobador (29 Jan 2007 - 17:18)
Moui, une solution un poil plus clean est de passer par un fichier htc et une propriété css "behavior", ça évite justement d'avoir un script à inclure dans ton code html.

J'ai résumé comment faire tout ça ici
Pour mettre ton js attaché a ta feuille de style tu peux utiliser un fichier "behavior" ( à chercher ). ça marche trés bien seulement, je préfere la solution js avec defer parcequ'il charge le script plus rapidement ce qui évite les images grises au chargement de la page. Par contre il faut que tu mettes ton script dans un commentaire conditionnel uniquement pour les versions avant ie7(qui gére le png) comme ça:
<!--[if lt IE 7]>
  <script defer type="text/javascript" src="scripts/ie6.js"></script>
<![endif]-->

Par contre ton script me semble un peu compliqué celui là est mieux:
for(var j=0; j<document.images.length; j++){
    var img = document.images[j]
      if (img.src.indexOf("png") != -1){
        var blankSrc = "rien.gif";
        var src = img.src;
        img.src = blankSrc;
        img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='image')";
    }
}

Il faut juste ne pas oublier de mettre une image rien.gif a la racine de ton site.
Modifié par matmat (29 Jan 2007 - 17:34)
merci
à vous

Cette histoire de fichier rien.png
est assez surprenante !

je vais tenter le htc
je ne connaissais pas ... l'idée de préloader une image c'est pas mal comme idée.

par contre j'aimerais bien, si vous savez, savoir comment
charger un fichier js ou css avec une ligne de code dans la css

en tout cas merci !
rien.gif c'est une image vide qui remplace ton image d'origine. En effet ce js comme le tient et comme le behavior) remplace ton image par un filtre, donc tu n'as plus besoin de l'image.
Sinon pour js depuis le css, c'est la même chose : htc.
Avec htc tu peux recréer en js les propriétés manquantes pour ie, par exemple hover ou png.
Modifié par matmat (29 Jan 2007 - 20:16)
Je commence à comprendre
Merci beaucoup Matmat
c'est sacrément subtil ! Smiley eek

je m'y mets tout de suite

bonne soirée
Modifié par trobador (29 Jan 2007 - 20:39)
Sujet clos
Aller à