EnIris

/**********************************************************
Sleight
(c) 2001, Aaron Boodman
http://www.youngpup.net
**********************************************************/

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent)
{
   document.writeln('


');
   window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs()
{
   var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

   for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--)
   {
       if (itsAllGood && img.src.match(/\.png$/i) != null)
       {
           var src = img.src;
           var div = document.createElement("DIV");
           div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')";
           div.style.width = img.width + "px";
           div.style.height = img.height + "px";
           img.replaceNode(div);
       }
       img.style.visibility = "visible";
   }
}

/**********************************************************
Sleight for Backgrounds
Original code (c) 2001 Aaron Boodman, http://www.youngpup.net
This version (c) 2003 Drew McLellan, http://www.allinthehead.com
**********************************************************/
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 < document.all.length; 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')";
           }
       }
   }
}

4 réponses à “Transparences des PNG sous Internet Explorer”

1. Abadie Guillaume Says:
   28 septembre 2008 at 15:08

   verry good script…
   thank you !

   But , i just underligne an error that i have found one the first.
   don’t forget the « ;»  at the end of :
   div.style.filter = « progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’»  + src + « ‘, sizing=’scale’)» 

   You have juste replace it by :
   div.style.filter = « progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’»  + src + « ‘, sizing=’scale’)» ;

   that all =)
   (no pub to my mail adress please …. I had post for helping you )

2. Benoit Says:
   28 septembre 2008 at 16:10

   Thanks for your help Guillaume, it’s corrected.
   your mail? what mail bye

3. Abadie Guillaume Says:
   11 novembre 2008 at 15:22

   C’est encore moi….
   j’ai vu que le site était en français, donc, au temps s’adapter dans sa langue natale :p.

   Vos 2 scripts actuels, sont très bien, mais il y à un gros souci…. les que vous transformez en div, çà les met en colonne à cause du style=» display:block;»  des DIV…
   Vous me direz : les utilisateur on juste à mettre div { display:inline-block; } dans le CSS… mais peut être qu’un déveulopper en à mare des ses problèmes de compatibilité IE et veut vite réglé sont problème de transparence en 1 seule et unique manipulation. (malheureusement, il n’y a pas que se problème sous IE… )

   Permettez moi donc de te présenté une varient en 1 seul fonction qui gère se problème…
   Juste se qui suit suffit , fini les 2 script à appeler…
   Pensez simplement à changer l’url de .gif transparents au 2 endroit nécessaire.

   if (navigator.platform == « Win32″ && navigator.appName == « Microsoft Internet Explorer»  && window.attachEvent)
   {
   document.writeln(’ ‘);
   window.attachEvent(» onload» , fnLoadPngs);
   }

   function fnLoadPngs()
   {

   var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, » );
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

   for (var i = document.images.length – 1, img = null; (img = document.images[i]); i–)
   {
   if (itsAllGood && img.src.match(/\.png$/i) != null)
   {
   var bck = img.src;
   var div = document.createElement(» IMG» );
   div.src = « transparent.gif» ;
   div.style.width = img.width + « px» ;
   div.style.height = img.height + « px» ;
   div.style.backgroundImage = « url(’»  + bck + « ‘)» ;
   div.style.border = « none» ;
   img.replaceNode(div);
   }
   img.style.visibility = « visible» ;
   }

   var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, » );
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i < document.all.length; 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(’transparent.gif’)» ;
   }
   }
   }
   }

   Vous pouvez bien entendu le testé (recommandé) par vous même avant de peut être le publier…
   Bonne journé

4. Benoit Says:
   11 novembre 2008 at 17:15

   Salut Guillaume, sinon tu as aussi la version décrite dans l’article http://www.eniris.com/2007/12/19/82-l-ultimate-transparence-des-png-sous-ie6-avec-du-css/ ou tu n’as plus, en suite, qu’a ajouter la class « png»  sur l’image png ou le bloc aillant un png en fond.

Laisser un commentaire

Nom (required)

Mail (ne sera pas affiché) (required)

Site web

Notify me of followup comments via e-mail