Transparent PNGs in Internet Explorer 6

• Download transparentPNG.zip-105.33KB

Introduction

In IE 6 if your webpage contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.

What is alpha-transparency?

GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency.

PNGs can contains alpha layers,so parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255.

All popular browsers can display PNGs transparent background , but not IE6 and previous versions of IE.

To fix this issue on Internet Explorer 6 you can use the following Javascript code :
function detectBrowserIE6() { var browser=navigator.appName; if ((navigator.platform == "Win32")&&(browser=="Microsoft Internet Explorer")) { if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { var ieversion=new Number(RegExp.$1) if (ieversion==6) return true; } } return false; } function LoadPngTransparency() { img = null; for(var i = 0; i< document.images.length; i++) { img = document.images[i]; if (img.src.match(/\.png$/i) != null) { img.style.width = img.width + "px"; img.style.height = img.height + "px"; img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')" img.src = "1px_square.gif"; } img.style.visibility = "visible"; } }

• function detectBrowserIE6() – this function detect if your browser is Internet Explorer 6
• function LoadPngTransparency() – apply to all PNGs loaded in your page the AlphaImageLoader filter.

This Microsoft proprietary alpha image loader filter is often used to work around the missing 32-bit PNG alpha transparency (24-bit + 8-bit alpha channel). The AlphaImageLoader filter is a "procedural surface", it displays an image "between the object background and content" .

Save the above two functions in a file called "transparentPNG.js" and then add the following code in your HEAD section from html.

<script type="text/javascript" src="transparentPNG.js"></script> <script type="text/javascript"> if (detectBrowserIE6() && window.attachEvent) { document.writeln('<style type="text/css">img { visibility:hidden; }</style>'); window.attachEvent("onload", LoadPngTransparency); } </script>

After that create a GIF image (1px x 1px) called "1px_square.gif". This image will be displayed "between the object background and content".

That’s all. When your page will be loaded, this script will apply the AlphaImageLoader filter to all your PNGs file in that page.

You can download the source code to see this little script in action.

License

This article, along with any associated source code and files, is licensed under The Intelliproject Open License (IPOL)

About the author