Recipe 3.11. Using Multiple PNGs with Transparency

Problem

You want to use multiple PNGs with alpha transparency.

Solution

Use Drew McLellan's updated Sleight script for triggering alpha transparency in Internet Explorer 5.56.

You can write the code into a separate JavaScript file or download the code from McLellan's site at http://allinthehead.com/code/samples/bgsleight.js:

if (navigator.platform == "Win32" &&   navigator.appName == "Microsoft Internet Explorer" &&   window.attachEvent) {   window.attachEvent("onload", fnLoadPngs); } function fnLoadPngs(  ) {  var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');  var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);  for (var i = document.all.length - 1, obj = null;    (obj = document.all[i]); i--) {    if (itsAllGood &&   obj.currentStyle.backgroundImage.match(/\.png/i) != null) {   this.fnFixPng(obj);   obj.attachEvent("onpropertychange",   this.fnPropertyChanged);   }  } }      function fnPropertyChanged(  ) {  if (window.event.propertyName == "style.backgroundImage") {   var el = window.event.srcElement;   if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {     var bg = el.currentStyle.backgroundImage;     var src = bg.substring(5,bg.length-2);     el.filters.item(0).src = src;     el.style.backgroundImage = "url(x.gif)";   }  } }      function fnFixPng(obj) {  var bg = obj.currentStyle.backgroundImage;  var src = bg.substring(5,bg.length-2);  obj.style.filter =  "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/books/3/27/1/html/2/"   + src + "', sizingMethod='scale')";  obj.style.backgroundImage = "url(x.gif)"; }

Attach the JavaScript file to the web page by placing the following code in between the head elements:

<script src="/books/3/27/1/html/2//_assets/js/bgsleight.js" type="text/javascript"></script>

Make sure to reference the JavaScript correctly. In this example, the JavaScript is located in the js folder that is placed in the _assets folder.

Be sure to upload single pixel transparent GIF (listed as x.gif in the script) to the web server and update the location reference the file location in the script for your needs.

Discussion

Support for alpha transparency in modern browsers is almost commonplace. Browsers that include native support for PNGs include Netscape Navigator 6+, Opera, Safari, and Internet Explorer for Windows 7. However, this list does not include the currently popular Internet Explorer for Windows 6.

To work around this, Aaron Boodman created a piece of JavaScript that used Microsoft's proprietary filter property to activate Internet Explorer for Windows 5.56 support for inline PNGs with alpha transparency, without interfering with the other browsers that support PNGs natively.

Drew McLellan built off of Boodman's work and modified the JavaScript used in the solution to make the script work not only for inline images, but also for background images (see http://allinthehead.com/retro/69/sleight-of-hand).

As a page is loaded, McLellan's JavaScript is executed. The script goes through the HTML markup looking for img elements that point to images with the png extension.

Once it finds such an img code, the script dynamically rewrites the HTML on the fly. The first part of the revision is to replace the PNG image with a single pixel GIF that is transparent.

Next, the PNG file is set in Internet Explorer's filter property in order to trigger the alpha transparency in that browser. Since the only way this can be done, the PNG gets set in the background.

Thus, the PNG is shown in the background behind the transparent GIF.

When you code the page, be sure to set the width and height of the PNG image in the CSS with the width and height properties. Otherwise, the script will not execute properly.

See Also

The original posting of the Sleight script at http://www.youngpup.net/2001/sleight; more information about Microsoft's filter property at http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha.asp.