This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. If you want to get straight to the script, go to the how-to page and follow the instructions there. If you have the time for a description and demo of the problem, then read on...
Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.
The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers - in fact it is treated as an HTML comment - thanks to IE's conditional comments. This solution is therefore light, portable and non-invasive to other browsers.
Already use the script? You can check the change log for details of what's new. Please feel free to use or amend this routine you as see fit.
March 2008: This script has been up for over 4 years now but I'm afraid I haven't the time to update it. I will leave it here for those who still can use it, but there may be better solutions around these days, such as Drew McLellans. I'm very sorry but I can no longer respond to any email about it - I just don't have the time. There is no official licence of any kind on this - it's simply freeware. Use it or change it as you wish.
Consider a standard GIF image with the halo problem. GIFs only allow one colour for background transparency, so a GIF placed over the intersection of another colour looks ghastly:
Drag me around the page!
Compare the above GIF to the same image below saved as a PNG. On modern browsers (Firefox, Opera etc), the halo problem is solved - but not in Windows Internet Explorer prior to version 7. IE 6 and under render the image with an ugly background which looks even worse than the GIF halo.
Finally, here is the same PNG right-aligned to this paragraph using the very common (deprecated) img align="right" construct. The PNG can be positioned in the same way as JPGs or GIFs, but the transparency issue remains a problem.
The GIF with the halo is still here, but the PNGs should now be working in IE versions 5.5 and 6. The only difference between this page and the previous one is a chunk of JavaScript.
Drag me around the page!
Compare the above GIF to the same image below saved as a PNG. The transparency should now be working in IE. Try dragging the car image around the screen and notice how it is "see-through".
Finally, here is the same PNG right-aligned to this paragraph using the very common (deprecated) img align="right" construct. The PNG can be positioned in the same way as JPGs or GIFs, and the transparency issue is now fixed.
The JS code can be seen if you do a "View Source" on the Solution page. There are two ways to use it - simple copy & paste or the JS include file method. Note that you must have height and width attributes specified for each image. Other attributes (class, alt, title & style) are optional so far as this routine is concerned, but are respected if specified.
There is also an imagemap version if you want to use imagemaps and/or form input images and a rollover version which enables the use of transparent PNGs in rollovers.
Method 1: Copy & Paste
For single page or occasional usage, copy the JS code in its entirety (from ) and paste it into your page somewhere in the the section. That's it.
Method 2: (recommended) JS Include File
If you wish to use the code on multiples of pages, you may prefer to use a JS include file. First, download the JS file here: pngfix.js. Place the file in your webpage directory, then add the following construct on each of your pages somewhere in the section:
Note the use of the defer keyword. This trick causes the images to be replaced before they are rendered. Earlier versions of this script did not use this method, occasionally resulting in an unpleasant screen flicker as the PNGs were being filtered. The code in the include file is slightly different from the copy and paste code referred to above, so I recommend downloading my file rather than making your own.
Here is a demo page using the Include file method. This method is arguably better for use with multiples of pages, as it only requires three lines of code per page. The JS file is only 2KB in size and will be cached after the first download. It will therefore incur no further download overhead on subsequent pages. The download time should be around 0.3 seconds on an average 48kbps dial-up modem connection.
No comments:
Post a Comment