PNG alpha support for Internet Explorer

• Download source - 16 Kb

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>

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 15 of 15 (Total in Forum: 15) (Refresh) FirstPrevNext

FIX for resizing images Member 1345128 19:29 8 Dec '07   Nice library. Better than the other one I was using (IE5.5+ PNG Alpha www.twinhelix.com) because the images are not non-transparent durring load. But I wanted to be able to stretch PNGs, such as image based backgrounds. So I added a definition for sizemethod. I set it to stretch, but then images that did not have a defined size in their tag (size from image attribute) do not size correctly. I noticed that the image height &amp; width are valid if you view them even though it doesn't work, apparently with stretch they get resized to the transparent gif size. But adding the two lines that set the height and width to themselves allows this to work properly for all images, those that have declared values like when you want to stretch them, but also for images that are relying on the image's size. function fixImage(element) {       // required so images with no size tag still work with "scale"       element.width = element.width;       element.height = element.height;       // added sizing method. element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + element.src + "',sizingMethod='scale')";       element.src = blankSrc; } Hope this helps others! max maxhamner@hotmail.com Sign In·View Thread·PermaLink What license? chappi1 4:55 20 Sep '06   Is this public domain? Cheers, Chappi Sign In·View Thread·PermaLink Great Work But Resizing images doesnt work!!! Pier... 2:28 29 Jun '06   I've tried your script and it is the first that works with my program (euDock). But the images cannot be resized. I will Make some experiment. THANKS A LOT!!! Sign In·View Thread·PermaLink Resource Protocol ! Nicolas MEURET 23:49 13 Feb '06   Just a little comment: Unfortunately, the AlphaImageLoader filter isn’t compatible with the RES protocol, so you can’t use this code in your CDialog class if the images are stored in your project resources. Sign In·View Thread·PermaLink Maps EDB_ENVC 5:09 17 Jun '05   You need to do the folowing to keep the image maps: //Applies filter and changes source to blank function fixImage(element) { element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + element.src + "'" + ")"; width = element.width; height = element.height; element.src = blankSrc; element.setAttribute("width",width); element.setAttribute("height",height); } Best Regards Edgar Delgado Barbosa Sign In·View Thread·PermaLink Re: Maps noname9876 1:56 31 Jul '05   Hi, I've tried to use your fix, but width & height declared in the CSS section are ignored when the filter is applied. for example, there is an image I'm streaching using "width:100%;", and when it is a .png image, it loads in it's original size... what am I missing here? 10x, yaniv. Sign In·View Thread·PermaLink Fix for filenames with "(" or ")" PolyVector 13:03 17 Feb '05   Png files with parenthesis in the filename will not display using this code... Here's a simple fix: Change this: element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" + element.src + "')"; to this: element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader()"; element.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=element.src; by the way, this was a very usefull article... thank you! Sign In·View Thread·PermaLink 5.00/5 (1 vote) PNG Background images??? dclark 15:26 11 Jan '05   Have you ever found a way to get this method to work if you are using PNG 's as a background image? for instance you may have the following body{background-image:url(pattern.gif)} then if you lay a div over the top that has a back ground image... for instance a drop shadow or the like.... <div id="content"></div> #content{background-image:url(dropshadow.png)} is it possible to run this MS filter on background images? Sign In·View Thread·PermaLink 1.00/5 (1 vote) Cross-Browser Compatibilty Davy Boy 12:53 29 Nov '04   I really liked your fix. I had tried others out there, and they did what I wanted to display in IE, but not to print. Yours covers the display and print problem in one. One problem though is using the code as is, means that you tie your site direct into IE, and ignore the ever growing Firefox market. In order that I got my page to work, I applied the following changes... I saved the javascript to a small file called png.js I then have conditional comments in the <head> of my html like so... <!--[if gte IE 5.5000]> <script type="text/javascript" src="png.js"></script> <![endif]--> Then, I made changes to the following parts of the JS, the following goes just below the   "//Captures print events" line: document.writeln('<style type="text/css">img { filter:expression(addPngImage(this)); } </style>'); Which applies the style sheet on the fly. Changed the function fixImage so it wasn't complaining about unterminated string constants like so... //Applies filter and changes source to blank function fixImage(element) {    element.runtimeStyle.filter =    "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" + element.src + "'"+")";    element.src = blankSrc; } The end result is that it works fine and dandy in IE and Firefox, and prints super too. Just thought I'd add this to help anyone in the same predicament, and maybe you wanna update the project to reflect. Thanks, Davy Boy Sign In·View Thread·PermaLink 5.00/5 (1 vote) It is a problem Sanjit Rath 9:33 17 Oct '04   Ye you have got it right. I will give you 5/5 after i try it out. Thanking you, Cheers, Sanjit Sign In·View Thread·PermaLink Brilliant CSnerd 16:19 14 Oct '04   Hey just wanted to say brilliant work, I am using the skmMenu (http://www.skmmenu.com) control in a web application in conjunction with your method, it was the only one that worked! I had tried the html control from WebFX but just could not get it to play nice with the skmMenu, God bless Codeproject. Sign In·View Thread·PermaLink Re: Brilliant Partenon 7:06 15 Oct '04   Thanks, I'm glad you like it Magnus Persson Sign In·View Thread·PermaLink Looks Familiar DFU23 7:59 23 Sep '04   You might want to add a reference to: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html Wally Atkins Newport News, VA, USA http://wallyatkins.com Sign In·View Thread·PermaLink Re: Looks Familiar Partenon 12:43 23 Sep '04   Yes the code is based on that article, however because of various javascript security issues I rewrote some of the functions. I will of course add a link of reference. Magnus Persson Sign In·View Thread·PermaLink Well known problem Philippe Lhoste 1:15 22 Sep '04   This is a well known problem and it is a good idea to put it there too... This is a pity we have to use such hacks to make a browser behave correctly. You really need to use such images to go to such lengths. Philippe Lhoste (Paris -- France) Professional programmer and amateur artist http://phi.lho.free.fr Sign In·View Thread·PermaLink

Last Visit: 16:58 21 Nov '09     Last Update: 16:58 21 Nov '09 1