Click here to Skip to main content
11,568,522 members (43,011 online)
Click here to Skip to main content

PNG alpha support for Internet Explorer

, 15 Sep 2004 64.1K 442 16
Rate this:
Please Sign up or sign in to vote.
An article on how to implement PNG alpha support for Internet Explorer

Introduction

Internet Explorer doesn’t support the alpha channel in PNG images. However the fix is to use the "AlphaImageLoader" filter. This script replaces all PNG images on the page with a blank image (blank.gif) and adds the "AlphaImageLoader" filter with the original image source. The blank image is to avoid the "broken image" picture to display above the filter. This script also supports printing and changing the source image at runtime.

Source

//Array containing all PNG images on the page
var PNGimageArray = new Array();
var isPrinting = false;

//Path to the blank image (1x1 transparent)
var blankSrc = "blank.gif";

//Captures print events
window.attachEvent("onbeforeprint", function () { beforePrint(); } );
window.attachEvent("onafterprint", function () { afterPrint(); } );
//Tests if element is a PNG image, and if so fixes it
function addPngImage(element){
  if (/\.png$/i.test(element.src)) {
    fixImage(element);
    element.attachEvent("onpropertychange", function () 
      { propertyChanged(); } );
    PNGimageArray[PNGimageArray.length] = element;
  }
}

//Applies filter and changes source to blank
function fixImage(element) {
  element.runtimeStyle.filter = 
   "progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='" + element.src + "')";
  element.src = blankSrc;
}

//If property "src" is changed fixs image (not 
//if it is changed to blank though)
function propertyChanged() {
  if (isPrinting) return;
  var element = event.srcElement;
  var pName = event.propertyName;
  if (pName != "src") return;
  if (!new RegExp(blankSrc).test(element.src))
    fixImage(element);

}

//Turns image back to original before print (Explorer can't print filters)
function beforePrint() {
  isPrinting = true;
  var element;
  for(var i = 0; i < PNGimageArray.length; i++){
    element = PNGimageArray[i];
    element.src = element.filters[0].src;
    element.runtimeStyle.filter = "";
  }

}

//Fixes image after print
function afterPrint() {
  isPrinting = false;
  var element;
  for(var i = 0; i < PNGimageArray.length; i++){
    element = PNGimageArray[i];
    fixImage(element);

  }
}
Style that makes all images run the addPngImage function. I use "expression" instead of "behavior" to avoid some security issues in Internet Explorer.
<style type="text/css"> img { filter:expression(addPngImage(this)); }
</style>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Magnus_
Web Developer
Sweden Sweden
Software developer

You may also be interested in...

Comments and Discussions

 
GeneralFIX for resizing images Pin
Member 13451288-Dec-07 18:29
memberMember 13451288-Dec-07 18:29 
QuestionWhat license? Pin
chappi120-Sep-06 3:55
memberchappi120-Sep-06 3:55 
GeneralGreat Work But Resizing images doesnt work!!! Pin
Pier...29-Jun-06 1:28
memberPier...29-Jun-06 1:28 
GeneralResource Protocol ! Pin
Nicolas MEURET13-Feb-06 22:49
memberNicolas MEURET13-Feb-06 22:49 
GeneralMaps Pin
EDB_ENVC17-Jun-05 4:09
memberEDB_ENVC17-Jun-05 4:09 
GeneralRe: Maps Pin
noname987631-Jul-05 0:56
membernoname987631-Jul-05 0:56 
GeneralFix for filenames with "(" or ")" Pin
PolyVector17-Feb-05 12:03
memberPolyVector17-Feb-05 12:03 
QuestionPNG Background images??? Pin
dclark11-Jan-05 14:26
memberdclark11-Jan-05 14:26 
GeneralCross-Browser Compatibilty Pin
Davy Boy29-Nov-04 11:53
memberDavy Boy29-Nov-04 11:53 
GeneralIt is a problem Pin
Sanjit Rath17-Oct-04 8:33
memberSanjit Rath17-Oct-04 8:33 
GeneralBrilliant Pin
CSnerd14-Oct-04 15:19
memberCSnerd14-Oct-04 15:19 
GeneralRe: Brilliant Pin
Partenon15-Oct-04 6:06
memberPartenon15-Oct-04 6:06 
GeneralLooks Familiar Pin
DFU2323-Sep-04 6:59
memberDFU2323-Sep-04 6:59 
GeneralRe: Looks Familiar Pin
Partenon23-Sep-04 11:43
memberPartenon23-Sep-04 11:43 
GeneralWell known problem Pin
Philippe Lhoste22-Sep-04 0:15
memberPhilippe Lhoste22-Sep-04 0:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150624.2 | Last Updated 16 Sep 2004
Article Copyright 2004 by Magnus_
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid