How to Use Transparent PNGs in IE6

A Code Solution to Using PNG Alpha Channels in Internet Explorer 6

Sep 27, 2008

Internet Explorer 6 does not natively support the alpha-transparency of the PNG graphic format. This guide demonstrates a coded solution using Javascript, CSS and HTML.

In August of this year, a NetApplications.com survey suggested that IE6 is still the browser of choice of over 25% of all internet users. This means that a web developer must seriously consider including design features that will be properly viewable in IE6, or risk alienating a quarter of visitors to their site.

This can be problematic when testing a website for cross-browser compatibility, as one of the hurdles a web developer may encounter is the lack of native transparency support for the .PNG format in IE6.

This tutorial demonstrates an effective guide to overcoming the lack of .PNG transparency in IE6, using Javascript, CSS and HTML.

What is the .PNG Format?

PNG (pronounced “ping”) stands for Portable Network Graphics. It is an image format that, unlike the JPG format, includes a lossless data compression scheme and supports full alpha-transparency, again unlike the JPG format. Developed to replace the limited GIF image type, the PNG format is quickly becoming the graphic format of choice for displaying images on the web.

What is Alpha Transparency?

Traditionally, a pixel within an image displayed on a web page used binary transparency. That is, the pixel was either completely transparent, or completely opaque. This is the transparency strategy used by the GIF file format.

The PNG format utilizes “alpha layers”. This allows parts of the image to have different levels of translucency. This could, for example, allow a foreground image on a web page such as a link button to show the background image between spaces in the button design. It is this alpha transparency feature that IE6 does not natively support.

The AlphaImageLoader Filter

IE6 might not natively support alpha imaging, but since IE4, the browser has featured many filters that are not explicitly used by the browser. These filters are, however, accessible through code calls. It is the AlphaImageLoader filter that will allow alpha transparency to be viewed in IE6.

Using Alpha Transparency in IE6

The first step in enabling transparent images in IE6 is adding a Javascript function within the header of each page of HTML:

var browserName=navigator.appName;

if (browserName=="Microsoft Internet Explorer") {

document.write('<link href="stylesieonly.css" rel="stylesheet" type="text/css">')

}

else {

document.write('<link href="styles.css" rel="stylesheet" type="text/css">')

}

</script>

This script tests the browser type being used. In this example, if the browser type is Internet Explorer, a cascading stylesheet called “stylesieonly.css” will be loaded. For other browsers, the stylesheet “styles.css” will be used. Thus, the creation of two stylesheets is required for this method to work: an IE6-specific stylesheet that includes a filter call, and a generic stylesheet that will display images in the normal fashion, without a filter call.

Cascading Stylesheet for Internet Explorer 6

In this example, an alpha-channel-enabled PNG image will be used to create a link button with mouseover properties. The CSS mark-up for the IE6-specific stylesheet looks like this:

a.homelink{

position: relative;

width:60px;

height:40px;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='home.png', sizingMethod='scale');

display:block;

}

a.homelink:Hover{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='homeover.png', sizingMethod='scale');

}

This is a fairly standard CSS class, with the addition of a call on the AlphaImageLoader filter. The use of this filter loads the PNG image with its alpha properties intact.Now, when the image is needed, this CSS class can be called from the HTML mark-up:

This combination of Javascript, CSS and HTML will display alpha-transparency in PNG images in IE6 without disrupting how the website HTML is interpreted by other browser types.

The copyright of the article How to Use Transparent PNGs in IE6 in Computer Programming is owned by Nicolas McGregor. Permission to republish How to Use Transparent PNGs in IE6 in print or online must be granted by the author in writing.