Fixing PNG transperency for Internet Explorer (MSIE): A Little Hack

Recently I have started using PNG format images for my web application icons because of its lossless data compression and variety of transparency options. More on PNG can be found on Wikipedia. (http://en.wikipedia.org/wiki/png)

Problem I faced with PNG images:
Well it is good to use PNG but there is one problem for PNG images with Internet Explorer (thanks to Microsoft and Bill Gates). Internet Explorer (IE) does not render PNG's transparency properly so background is shown for transparent PNG images. It was really bad hit for my development. But i believe 'where there is will, there is a way' or you can say 'where there is a problem, there is a solution'.

Solution I found and Implemented:
While searching for solution on Internet, I found a simple and useful solution to the problem. I implemented it and it worked great as the author said so. Well it is a little javascript hack for only Internet Explorer which renders PNG images as SPAN and displays the image as it is meant. The hack uses Microsoft's AlphaImageLoader filter to display the transparency of PNG images. The little javascript code only works with IE and does not bother other browsers.

Where to get it:
I have pasted the code at bottom of this post but i will recommend to go to official site for updated version of the code. The code is placed at the website http://homepage.ntlworld.com/bobosola/. I didn't get the name of author, I feel sorry for I was not able to mention his/her name here. I didn't find it on site, if someone gets it please let me know. But the author has thanked many people on his website.

Disadvantages:
The hack is based on javascript and works only for Internet Explorer 5.5 and 6 on Windows. If javascript is OFF the images are shown as with background. (but i don't bother for that because my most web applications are based on Ajax so it is meant only for user with javascript ON). There are few more cons in hack which are explained on the site mentioned above.

The Code:
There are two ways of using the hack.

1. Put following code to head section of your web page. (just copy/paste)
   
   <!--[if lt IE 7]>
   <script
   language="JavaScript">
   function correctPNG() // correctly handle PNG
   transparency in Win IE 5.5 & 6.
   {
   var arVersion =
   navigator.appVersion.split("MSIE")
   var version =
   parseFloat(arVersion[1])
   if ((version >= 5.5)
   && (document.body.filters))
   
   {
   for(var i=0;
   i<document.images.length;
   i++)
   
   {
   var img
   =
   document.images[i]
   
   var imgName =
   img.src.toUpperCase()
   
   if (imgName.substring(imgName.length-3, imgName.length) ==
   "PNG")
   
   {
   
   var imgID = (img.id) ? "id='" + img.id + "' " :
   ""
   
   var imgClass = (img.className) ? "class='" + img.className + "' " :
   ""
   
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt
   + "'
   "
   
   var imgStyle = "display:inline-block;" + img.style.cssText
   
   if (img.align == "left") imgStyle = "float:left;" +
   imgStyle
   
   if (img.align == "right") imgStyle = "float:right;" +
   imgStyle
   
   if (img.parentElement.href) imgStyle = "cursor:hand;" +
   imgStyle
   
   var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" +
   "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
   +
   "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" +
   img.src + "\', sizingMethod='scale');\"></span>"
   
   img.outerHTML =
   strNewHTML
   
   i = i-1
   
   }
   }
   }
   }
   window.attachEvent("onload",
   correctPNG);
   </script>
   <![endif]-->
   


2. Second is save the above code in file and name it pngfix.js and copy the following code to head section of your web page.
   
   <!--[if lt IE 7]>
   
   <script defer type="text/javascript" src="pngfix.js"></script>
   
   <![endif]-->

Help for implementation:
If you need any help for implementing the code just visit the website of the author where he has explained it in a simple and effective way with demos. And secondly you can post comment here for help and I will help if I am able to.

Keep Sharing !