Mootools PNG Transparency fix for IE6
We developed this for webtogs originally in an attempt to fix the original PNG fix scripts and improve on the later attempts at doing this via mootools.

*edit* as Peter says, CNET's own Aaron Newton has refactored his function but it did not take into account events. Another thing that is missing is opacity.

note: this loop won't actually cover background images of elements, just IMG tags (you can tweak the selector at the bottom)

// highlight does not work on ie6.
if (window.ie6) {
	//  css selector of all images with a property src ending on "png"
    $$('img[src$=png]').each(function(img, i) {

        // set some sample events...
        var coords = img.getCoordinates(); // stick that inside the 'addEvent' and you get errors after png fix.
        img.addEvent("mouseenter", function() {
            var pic = new Element("div");
                pic.setStyles({
                    "position": "absolute",
                    "left": parseInt(coords["left"]+10)+"px",
                    "top": parseInt(coords["top"]+26)+"px",
                    "border": "1px solid #000",
                    "border-top": "0px",
                    "min-width": "293px",
                    "min-height": "113px"
                })
                .setHTML("<img src='http://dci.uk.net/images/dot-com-logo-splash2.jpg' />").setProperty("id", "picpreview").injectInside(document.body);

            var ps = pic.clone().empty().setOpacity(0.5)
                .setStyles({
                    "background": "#555",
                    "border": "1px solid #000",
                    "left": parseInt(coords["left"]+13)+"px",
                    "top": parseInt(coords["top"]+29)+"px",
                    "width": "293px",
                    "height": "113px"
                })
                .setProperty("id", "ps")
                .injectBefore(pic);

            $("eventboard").setHTML(this.id);
        })
        .addEvent("mouseleave", function() {
            if ($("picpreview")) {
                $("picpreview").remove();
                $("ps").remove();
                $("eventboard").setHTML("left " + this.id);
            }

        });

        var oldId = img.id;
        img.setProperty("id", "old"+i)

        // leave our demo one out... (has rel="exclude")
        if (img.getProperty("rel") == "exclude")
            return false;

        // create span element...
        var imgClass = (img.className) ? "class='" + img.className + "' " : ""
        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
        var strNewHTML = "<span id='clone"+i+"' " + imgClass + imgTitle
        + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
        + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";

        img.outerHTML = strNewHTML;
        // now, revert events back, then restore whatever other properties we want (opacity does not work)
        $("clone"+i).cloneEvents(img).setProperties(img.getProperties('alt','rel','title','id'));
        // id now is old id...

    }); // each
} // end if ie6