PNG Behavior
Below is the complete source for the behavior. Notice that the behavior will only do anything if the user is using IE55+ on a Win32 platform.
CODE:
<public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
<script language="jscript">
var original = element.src;
var spacer = "images/blank.gif";
var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
function filterImage() {
if(/\.png$/.test(original) && htc) {
element.style.visibility = 'hidden';
var preload = new Image();
preload.onload = function() {
element.style.height = element.style.height ? element.style.height : this.height;
element.style.width = element.style.width ? element.style.width : this.width;
element.src = spacer;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + ", sizingMethod='scale', enabled='true')";
element.style.visibility = 'visible';
}
preload.src = element.src;
}
}
</script>
</public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
<script language="jscript">
var original = element.src;
var spacer = "images/blank.gif";
var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
function filterImage() {
if(/\.png$/.test(original) && htc) {
element.style.visibility = 'hidden';
var preload = new Image();
preload.onload = function() {
element.style.height = element.style.height ? element.style.height : this.height;
element.style.width = element.style.width ? element.style.width : this.width;
element.src = spacer;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + ", sizingMethod='scale', enabled='true')";
element.style.visibility = 'visible';
}
preload.src = element.src;
}
}
</script>
</public:component>
Usage
The usage is really simple. All you need to do is to add the png behavior to the image element.
<style type="text/css"> img { behavior: url("pngbehavior.htc"); } </style>
