Internet Explorer 5 and 6 Ping Transparency Fix Using Java Script

Internet Explorer 6 or IE6 has a well documented problem with displaying PNG (or Portable Network Graphics) Images, this tutorial will show your an easy way to fix the IE6 PNG problem. A PNG image has an extra attribute associated with it known as Alpha Transparency, this Alpha Transparency allows each pixel in the image to have a level of transparency allowing graphic artists to create images that look visually stunning - infact much of the look and feel of the Web 2.0 revolution relies on this. Internet Explorer has only been able to support this extra attribute since Version 7 and since many web users are still running earlier releases of IE, ways have had to be devised to work around Internet Explorers Weakness.

This solution despite being conceived over 4 years ago remains the easiest way to circumvent the IE5 and IE6 png transparency problem.

First we need to include a few lines of code within the head section of our HTML code which will tell the user's browser (if and only if it is running IE 6 or IE 5) to have a look at a Java Script File (Which we will discuss later):





This simple script tells the visitor's browser (if and only if it is a version of IE below 7, ie IE6 and IE5), that it needs to go and read a script which is plain text of the type javascript and located in the file pngfix.js.

Note if you keep your scripts together in one file, as I do you can add that file in and if the page is in a different folder you can write:

src="/../myscriptsfile/pngfix.js"

 OK, this needs to be added to each page containing a png image, unless you are using an Content Management System, in which case it just needs to added to the index.php file of your template.

Next for the Java Script 

Click the link below, copy and paste the text into your text editor, or DW and save as pngfix.js, then save the file where you need it and bang - your pngs will work in Internet Explorer.

png.fix