올댓오카리나

This method does no checking for deprecated  img align="left" or align="right" attributes. It also breaks the non-invasive JS principal somewhat in that it is specifically called by selected PNG images on load in all JS-supporting browsers. However, while the function is called in all browsers, it only actually does something in IE 5.5 and 6.

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     
    }
}

To implement this only on specific PNGs, add the following to each PNG image you wish to transform:

<img src="xyz.png" alt="foo" width="10" height="20" onload="fixPNG(this)">

NB: You must have height and width attributes specified.

Unit PNG Fix

Waaaaah! Waaaaaah! You hear that? That’s IE6 whining about how you should be using an obtuse “filter” attribute, causing all those nice, pretty pngs on your page to go whacky. Fortunately for you, we got just the thing to shut it up. Give it just the tiniest dose of our Unit PNG Fix and bask in the the glorious phosphoresence of your png images once again! While this is not the only png fix out there (in fact, it was inspired by Drew McLellan’s supersleight), here’s why it will be the last one you need to download:


Very compact javascript: Under 1kb!
Fixes most interactivity problems caused by IE’s filter attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call functions.
Allows for auto width and auto height elements.
Super simple to deploy.

Go ahead and download the zip. Go ahead, it won’t bite. Then add the following code to your header [make sure the paths reflect your folder structure]: