mootools php faith camera linux

mootools

IE6 png support
(fixPNG
supercharged)



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
      + "
pxheight:" + 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(itemindex){ 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
Creative Commons License Jay Johnston is a Zend Certified Engineer in PHP 5 LPI-ID: LPI000102450, Verfication Code: wmnnt56y2k  ... Jay Johnston is certified as LPIC-1 by the Linux Professional Institute