Introduction

This behavior adds support for the most powerful raster graphic format available to Internet Explorer. It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel which allows the images to be semi transparent. Transparency allows images to have antialiased edges and this makes the images look more professional.

Implementation

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

<img src="blank.gif" style="width: 100px; height: 100px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />

See MSDN for a complete reference.

Notice that the true source is put in the src property of the filter and a blank image is used as the src attribute for the image. Another thing to notice is that the size should be set so that the filter will be applied. Another reason to set the size is to force the image to take the size of the real image and not of the blank image.

Behavior

Now we need to create the behavior that handles all this behind the scenes. What we need to do is to check the src and if it is a PNG image we add the filter and change the src of the image to a blank image. To find when the src changes we listen to the onpropertychange event. If the src is not an PNG image we remove the filter. To make it easier we modify the runtimeStyle object instead of the style object. The runtimeStyle object can be thought of as an extra style cascade layer that takes precedence over the normal style declarations. When setting the runtimeStyle the old values are still stored at the style object so once the runtimeStyle is reset the old style values will be applied as normal.

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.

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

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

Remarks

Notice that the behavior uses an image named "blank.gif". This image should be placed in the same directory as the web page using the behavior or otherwise you will have to modify the behavior file.

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

PNG Behavior
Demo
Download

Author: Erik Arvidsson