PNGPong is an open source solution to display transparent PNGs in IE, Firefox, and Safari without the use of filters or complicated Javascript and CSS.
IE versions 5.5 - 6.x has issues handling PNG alpha channels. The solution that is available from Microsoft is to use the AlphaImageLoader filter. Now IE 7 is suppose to support this natively (IE 7 Checklist and IE7 Transparent PNG Implementation), but still uses filters to handle the alpha channel. I feel that the filter solutions are still not very clean since Microsoft’s implementation is something that is not supported in the other major browsers like Firefox and Safari.
Adobe’s Flash Player version 6,0,65,0 (win) or 6,0,67,0 (mac) and higher have support for movies with a transparent background (Adobe TechNote). Now the only problem with this is that Safari is not supported.
Here are the two outstanding issues we face:
With the release of Flash Player 8 we received the ability to use loadMovie() to load a SWF, progressive JPEG, unanimated GIF, or PNG file into a MovieClip in Flash Player while the original SWF file is playing.
What we do is combine the best aspects of the two issues listed above with Flash Player 8’s ability to dynamically load PNGs. This leaves us with a cross-browser solution where we use Flash Player to display transparent PNGs in IE and use native <img> support for alpha channels in PNGs for all other browsers.
We take an empty SWF with a bit of Actionscript in order to handle the dynamic loading of the PNG and add functionality to handle image swaps, button states, and onpress handlers. This solution gives us the freedom to have one image asset for Safari, Firefox, and, IE with a single line of Javascript code.
PNGPong consists of 1 Javascript file and 1 swf file and utilizes Geoff Stearns SWFObject to write the object/embed tags for Flash.
Example - This demo shows the following examples:
Please note that IE is the only browser that will utilize a swf to display the image. All other browsers will embed the PNG using an IMG tag.