zero0.org

IE6 is the bane of the Internet. One of the worst things about it is how it handles transparent PNG images. Here is a jQuery plug-in that fixes it.

(function($) {
 $.fn.extend({
  png: function(options) {
   var settings = $.extend({}, $.fn.png.defaults, options);
   var ie6 = navigator.appVersion.indexOf("MSIE 6.0") != -1;
   var ie55 = navigator.appVersion.indexOf("MSIE 5.5") != -1;
   if (jQuery.browser.msie && (ie6 || ie55)) {
    return this.each(function() {
     var $rootThis = $(this);
     if (settings.doImg) $rootThis.find("img[src$=.png]").each(
      function() {
      var $this = $(this);
      $this.css({
       filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='" + $this.attr("src") + "', sizingMethod='scale');",
       height: $this.height(),
       width: $this.width()
      })
      .attr("src", settings.blank);
     });
     if (settings.doInput) $rootThis.find("input[src$=.png]").each(
      function() {
      var $this = $(this);
      $this.css({
       filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='" + $this.attr("src") + "', sizingMethod='scale');"
      })
      .attr("src", settings.blank);
     });
     if (settings.doBgImg) $rootThis.find("*").andSelf().each(
      function() {
      var $this = $(this);
      var bgImg = $this.css("background-image");
      if (bgImg && bgImg.match(/^url\(\".+?\.png\"\)$/i)) {
       bgImg = bgImg.substr(5, bgImg.length - 7);
       var sizing = ($this.css("background-repeat") == "no-repeat") ?
        "crop" : "scale";
       $this.css({
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
         src='" + bgImg + "', sizingMethod='" + sizing + "');",
        backgroundImage: "none",
        height: $this.height(),
        width: $this.width()
       });
      }
     });
    });
   }
   return this;
  }
 });
 $.fn.png.defaults = {
  blank: "blank.gif", //the transparent image to replace img tags
  doImg: true,   //do img tag fixes
  doInput: true,   //do  tag fixes
  doBgImg: true  //do 'background-image' fixes
 };
})(jQuery);

Example

// Fixes all the PNGs in the document
$(function() { $(document).png(); }

// Fixes all the PNGs in the div with class 'image'
$(function() { $("div.image").png(); }

// Fixes all the PNGs in the div with class 'image' 
// using 'transparent.gif' for transparency
$(function() { $("div.image").png({blank: 'transparent.gif'}); }

// Fixes all the PNGs in the div with class 'image' but
// not fixing any background PNGs
$(function() { $("div.image").png({doBgImage: false}); }