Explorer versus PNG (AlphaImageLoader)

Sorry for the translation, english it's not my mother tongue, but I will try to do my best.

In short, explorer it's a shit, and in order to make png alpha channel work you have to use a non standard feature: style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='scale');" of course it's totally out of any specs and any logic.

Now I'm going to explain the "micro$oft way of doing things" ™, WARNING lot's of turns along the way.

It seems that there was no way they could put the alpha channel support inside explorer, so in order to support it they make you call an external DirectX filter wich is the one that finally shows the image. This shouldn't surprise anyone, for example until explorer version 5.5b1 frames were implemented as separate processes, this caused the z-index property to be 0 on all of them, rendering it useless. It also caused stress to the sistem in pages with a lot of frames, because there was a separate copy of explorer for each frame. Curious, efficient programming.

Oh yes!, now when they will finally manage to implement it the way everybody else does, they will say this way it's much more efficient (obviously) and better this way (they are great).

Let's see, if you can put an image in a tag like <img src="imagen.png"> what the fuck makes you put this shit:

<img SRC="tux-small2.png" ALT="Tux" height=359 width=315 align=BOTTOM title="Tux, the mascot penguin" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='scale');" >
<script language="JavaScript" type="text/javascript">
//<!--
var agt=navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

if ( is_ie )
{
        tuximg.src="blank.gif";
}
//-->
</script>

1. Create a file named pngbehavior.htc with the contents:

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

2. And use it this way:

<img SRC="tux-small2.png" ALT="Tux" height=180 width=158 align=BOTTOM title="Tux, the mascot penguin (pngbehaviour)" style="behavior: url('/pngbehavior.htc');">

or

<style type="text/css">
        img { behavior: url("/pngbehavior.htc"); }
</style>
	
<img SRC="tux-small2.png" ALT="Tux" height=180 width=158 align=BOTTOM title="Tux, the mascot penguin (pngbehaviour)">

3. Work on the next Microsoft created problem.

Here there are four images, the first one it's only the img tag, standard since eons, the second one it's the microsoft method, martian, twisted and incompatible with every other one in this planet, the third way is the join of both using a little bit of javascript, and finally the fourth is the behavior method using css.

Another update! Simone Gianni has sent me another solution that means even less work, althougth it's far from what it should being, the trick it's to substitute the resizing method from "scale" to "image":
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='image');" >
Now you don't need to specify the height and width of the image, but it's recommended to put them because they help the navigator to render the page, bacause of having the size of the images before to beging dowloading them.

Another update (reloaded)! Greg Thomas sent me an email that twist this history even more. He tells that since one update from Microsoft he has to change:
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small2.png', sizingMethod='image');" >
to:
<img SRC="tux-small2.png" ALT="Tux" align=BOTTOM title="Tux, el pinguino mascota" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='tux-small2.png');" >
He also says that the url http://www.koivi.com/ie-png-transparency/ has something interesting about this thing (hint: it's a php script that changes the page for you dependin upon the navigator that it's loading the page).

Various bits of documentation about this fact, please somebody tell the guys at micr$oft to read a bit, since 1996 October there has been more than enougth time:
PNG standard aproved by w3c
PNG home page
PNG alpha support test
The microsoft documentacion of the AlphaImageLoader filter

Information hardly recopiled by Jorge Nerín, if you want you can contact me.

Return to home.