Thomas Bandt

Über mich | Kontakt | Archiv

The better IE PNG Fix (with ASP.NET Sample)

A month ago I wrote about a solution to fix the transparent PNG issue in Internet Explorer 6.

I implemented the presented solution and got a bit astonished. It still works, but if you have, let's say more than one PNG on your site, it becomes very slow. The reason is simple: the script runs over all objects on the site after the site is completely loaded and changes the defined images. The outcome of this is a very ugly effect - you can see first all images none-transparent and then getting transparent - one after the other. Eventually it was absolutely not usable in my case.

Looking around for an alternative solution got deflating, nothing to see in the scriping universum. But there is another way, from my point of view even the best way: using a CSS filter which is supported only by Internet Explorer (thank you Microsoft for ignoring web standards for years :)).

So, instead of embedding the image via HTML image tag, use a DIV. A DIV? Yes! Example:

   1:  <div style="position:relative; height:100px;width:200px;
   2:  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
   3:  (src='/your.png', sizingMethod='scale');\"></div>

The only "disadvantages": you must know the size of the image by betting it in, and, yes, IE6 users still can not save the images. But who is using that browser still deserves some limitations, or?

In combination with server side logic whether to render an image tag or this alternative construct, it brings you the flexibility to use transparent PNG graphics wherever you want on your site (even as background images!). I suggest to use a custom server control in ASP.NET to do the trick. Below a simple example how this could look like.

   1:  public class GraphicText : Control
   2:  {
   3:   
   4:      public string ImageUrl { get; set; }
   5:      public string AlternateText { get; set; }
   6:      public int Width { get; set; }
   7:      public int Height { get; set; }
   8:   
   9:      protected override void OnPreRender(System.EventArgs e)
  10:      {
  11:          if (HttpContext.Current.Request.Browser.Type == "IE6")
  12:          {
  13:              Literal img = new Literal();
  14:              img.Text = "<div style=\"position:relative; height:" + Height + 
  15:                  "px; width:" + Width + "px; filter:progid:DXImageTransform." +
  16:                  "Microsoft.AlphaImageLoader(src='" + 
  17:                  VirtualPathUtility.ToAbsolute(ImageUrl) + 
  18:                  "', sizingMethod='scale');\"></div>";
  19:              Controls.Add(img);
  20:          }
  21:          else
  22:          {
  23:              Image img = new Image();
  24:              img.AlternateText = AlternateText;
  25:              img.Attributes["title"] = AlternateText;
  26:              img.ImageUrl = ImageUrl;
  27:              Controls.Add(img);
  28:          }
  29:      }
  30:   
  31:  }

That's all the magic. And it works.



« Zurück  |  Weiter »