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="/img/spacer.gif"> 

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

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