Images png sous Internet Explorer en javascript

transparence images png Le script ci-dessous va permettre de contourner une des carrences d'Internet Explorer et de traiter correctement à sa place la gestion de la transparence des images au format *.png.

Sous les versions 5 et 6 de IE (si... si... il y en a encore en 2024!), la transparence des images n'est pas interprétée et l'affichage est tout moisi.
Question d'habitude puisque ce navigateur ne fait jamais rien comme les autres, c'est bien connu. Bref...
Mettez donc à jour votre navigateur ! ou passez sous Firefox mais faites quelque chose...
A quoi ça sert Internet Explorer ? -> A télécharger firefox !

Prérequis

Les attributs "width" et "height" des images doivent être définis. Les autres attributs (class, alt, title, style), pour autant que cette routine soit concernée, sont optionnels mais sont respectés s'ils sont spécifiés.

Utilisation

Ne s'applique pas aux images png en background.
Il y a deux manières d'utiliser le javascript qui va nous permettre de contourner l'affichage moisi :
1/ Pour une simple page, copier tout le code JS dans le head de votre page;

2/ Pour des pages multiples (include): copier le code JS dans le head de votre page (de <!--[if lt IE 7]> à <![endif]-->)

Copier ensuite le code de (var arVersion... jusqu'à la fin) dans un fichier pngfix.js que vous placerez à la racine de votre site. Notez l'utilisation du mot-clé "defer", lequel va permettre de traiter l'image avant son affichage.

<!--[if lt IE 7]>
<script defer type="text/javascript" src="/pngfix.js"></script>
<![endif]-->

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
   }
  }
 }



Source de l'article en anglais.

Autre javascript possible

<script type="text/javacript">
<!--
function correctImg(){
 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
  }
 }
}
window.attachEvent("onload", correctImg);
//-->
</script>


© latarteauchips 2024
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries
Valid XHTML 1.0 Strict