fixing .png transparency for IE6 with mootools

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 1.11.

*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)

Mouseover this image to fire off the events...
This is the unprotected png that should also have the mouseover events, with the original png fix applied.

It fails to take the events, the opacity, the id... Functions that referenced $("imageid") of an image that had been changed failed... Events would not fire, styles would differ.

the code that follows is what we eneded up using in production and it keeps events and styles as best as possible.

// written for mootools 1.11
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