png behavior

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>


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>

No comments:

Post a Comment