MHCCORP.COM - Web Design

[

Useful Tips

]

Making PNG images transparent in IE6

This little tutorial shows you how to use a JavaScript trick that makes PNG alpha transparency work in Internet Explorer 6 simply by including a JavaScript file in your page.

PNG transparency, unlike GIF transparency supports full alpha blending, so that the background blends into the transparent area depending on the value at which the alpha channel is set. Point being: there's no doubt why you may want to use PNGs in your website. As you may know, PNG transparency is supported by Internet Explorer 7 as well as Firefox, thus you have the most popular browsers covered already.

However, Internet Explorer 6 does not support PNG transparency, so we need to find a workaround.

The workaround for IE6 involves using a small JavaScript code that uses a 1 pixel transparent GIF file to simulate the transparency for IE6. Here is the code for the JavaScript file:

                
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && 
    window.attachEvent && navigator.userAgent.indexOf("Opera")==-1)
{
  document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
  window.attachEvent("onload", LoadPng);
}

function LoadPng()
{
  var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
  var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

  for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--)
  {
    if (itsAllGood && img.src.match(/\.png$/i) != null)
    {
      var src = img.src;
      img.style.width = img.width + "px";
      img.style.height = img.height + "px";
      img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" 
        + src + "', sizingMethod='scale')"
      img.src = "1px.gif";
    }
    img.style.visibility = "visible";
  }
}

All you need is to place this code in a JS file named TransparentPng.js. You also need a 1 pixel GIF file named 1px.gif that is transparent.

Here is a sample HTML file that benefits from this hack:

                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>Transparent PNGs in IE6</title>
<!--[if lte IE 6]>
    <script type="text/javascript" src="TransparentPng.js"></script>
<![endif]-->
  </head>
  <body>
    <div style="background-color: #666666; text-align: center;">
      <img src="Transparent.png" alt="Transparent" />
    </div>
  </body>
</html>

You can download all this code, as well as the 1-pixel GIF file and a sample transparent PNG file and try it out for yourself.

Last update: 21-Mar-2008