---

If (1) you are using soft pngs (.png with > 8 bits/pixel), you know, like pngs that have a soft gradient that goes from an opaque or semi-opaque color to transparent, and (2) you are viewing this during the remaining 30% (or less) of Internet Explorer 6 (IE6) browser market share then you need (or are already using) this or some other version of fixPNG.


var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
function fixPNG(myImage) {
  if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
    var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
    var imgClass = (myImage.className) ? 
      "class='" + myImage.className + "' " : "";
    var imgTitle = (myImage.title) ?
      "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
    var imgStyle = "display:inline-block;" + myImage.style.cssText;
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
      + " style="" + "width:" + myImage.width
      + "px; height:" + myImage.height
      + "px;" + imgStyle + ";"
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
      + "(src='" + myImage.src + "', sizingMethod='scale');"></span>";
    myImage.outerHTML = strNewHTML;
  }
}
// use one fixPNG for each element that needs fixing
fixPNG(document.getElementById('pt'));
fixPNG(document.getElementById('beb'));


So how do we make this better?

Note those last two lines. Instead of using those kind of triggers to fix your pngs, include a version of MooTools in the header of your document and then include this code (in place of the one-per fixPNG triggers).


$$('.fixPNG').each(function(item, index){ fixPNG(item); });


Read up on MooTool Dollars and on array functions to take apart what this supercharger does.

But wait, it doesn't work? Well, it is actually working, but you have to "feed" the array elements by adding the class "fixPNG" to your images that are pngs. For instance change <img src="soft.png"/> to <img src="soft.png" class="fixPNG"/> and if your image is already using a class then change <img src="soft.png" class="neat"/> to <img src="soft.png" class="neat fixPNG/> .



Last Updated: 2008-08-30 10:29:41