AlphaImageLoader fix for PNG's works online but not locally

Question

I use the AlphaImageLoader fix called supersleight with the following code:

   var supersleight = function() {

 var root = false;
 var applyPositioning = true;

 // Path to a transparent GIF image
 var shim   = 'images/empty.gif';

 // RegExp to match above GIF image name
 //var shim_pattern = /x\.gif$/i;



 var fnLoadPngs = function() { 
  if (root) {
   root = document.getElementById(root);
  }else{
   root = document;
  }
  for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
   // background pngs
   if (obj.currentStyle.backgroundImage.match(/\_.png/i) !== null) {
    bg_fnFixPng(obj);
   }
   // image elements
   if (obj.tagName=='IMG' && obj.src.match(/\_.png$/i) !== null){
    el_fnFixPng(obj);
   }
   // apply position to 'active' elements
   if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
    obj.style.position = 'relative';
   }
  }
 };

 var bg_fnFixPng = function(obj) {
  var mode = 'scale';
  var bg = obj.currentStyle.backgroundImage;
  var src = bg.substring(5,bg.length-2);
  if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
   mode = 'crop';
  }
  obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
  obj.style.backgroundImage = 'url('+shim+')';
  obj.style.visibility= 'visible';
 };

 var el_fnFixPng = function(img) {
  var src = img.src;
  img.style.width = img.width + "px";
  img.style.height = img.height + "px";
  img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  img.src = shim;
  img.style.visibility= 'visible';
 };

 var addLoadEvent = function(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
   window.onload = func;
  } else {
   window.onload = function() {
    if (oldonload) {
     oldonload();
    }
    func();
   };
  }
 };

 return {
  init: function() { 
   addLoadEvent(fnLoadPngs);
  },

  limitTo: function(el) {
   root = el;
  },

  run: function() {
   fnLoadPngs();
  }
     };
    }();

    // limit to part of the page ... pass an ID to limitTo:
    // supersleight.limitTo('header');
    supersleight.init();
    //Från början är opacity'n 100 eftersom jag inte vet om Javascript är påsatt eller inte och därmed inte vet om PNG'arna kommer att
    //bli genomskinliga eller ej. Är Javascript på så gör jag också bakgrunden genomskinlig så att PNG'arnas genomskinlighet inte blir i onödan
    //If-satsen eftersom transparency ej existerar på första-sidan och därigenom ger fel där

    if(document.getElementById('transparency') != null){
     document.getElementById('transparency').style.filter= "alpha(opacity=60)";
     document.getElementById('transparency').style.background = "#cccccc";
     }

I call it via a SCRIPT defer tag in the beginning of the HTML file. When I upload the script and page to the server, it works great but when I try it locally, no image is shown at all. Basically, the script sets the background as the former PNG image using the AlphaImageLoader and then sets an empty pixel as IMG src instead.

If I comment out:

//img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
//img.src = shim;

the image appears in normal state, that is as a PNG with transparency removed. Somehow, the filter doesn't set the background properly when it's done locally and leaves it empty. When trying this at Browsershots and IE Netrenderer (ipinfo.info) I get the same result at Netrenderer even though Browsershots, Microsoft Expression Web Superpreview 3, testing with multipleIEs and IETester shows things the way they should...

Anyone got an idea?

---

Turns out it was because I accessed it via file:// and all of it was lying in a folder with lots of spaces and strange characters in its name.. .not that I thought it would matter but apparently, for this effect to work in my case, I can't have it in a folder which doesn't follow a simple syntax without spaces and stuff... maybe it's more of a general Explorer issue than specifically AlphaImageLoader... anyone who wants to enlighten me a bit more in this matter is welcome! :)

---

One more update... I can access it both via web, local server (localhost) and directly through file (file:// or C://) without problem. The problem occurs when the following happens:

I had a folder with the following name:

Sirocco v. 1.2 (uploaded 100908) PNGfix+bakgrundsfärger_IE5.5-6

When using other folder names the problem never occurred so I tried to narrow it down... seems like the

)

symbol is the one that causes the problem.. with it, the AlphaImageLoader doesn't fill the background the way it's supposed to but without it, the background fills alright... anyone got a clue as to why?

Answer 1

AlphaImageLoader uses paths relative to the document and not the CSS file. Maybe that has something to do with your problem?

Answer 2

It isn't working because you are using file:// and not http:// and the browser's security settings won't let you run javascript from file://

If you don't already have a server set up on your PC, I can recommend XAMPP.

Answer 3

SOLUTION: I feel stupid, this has got to do with the parameters received by the filter effect.

The use of the filter looks like this:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader('source','sizingMethod')

Of course when I go on and pound the follwing for source:

Sirocco v. 1.2 (uploaded 100908) PNGfix+bakgrundsfärger_IE5.5-6

...the filter won't know where to close the paranthesis and closes it too early, hence the image path being incorrect and the sizingmethod not even included. Of course this could have been foreseen by the programmer but I don't blame him.. cmon what kind of folder names am I using here??? Of course. I wouldn't use them in a real situation.. it's just for local storing of a website so I can keep track of which version.

SOLVED! Thank you all of you!