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-small.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-small.png" ALT="Tux" height=359 width=315 align=BOTTOM title="Tux, the mascot penguin" name="tuximg" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tux-small.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-small.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-small.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.

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.