====== pngpong ======

{{tag>project PNGPong}}


===== Summary =====

  * **Homepage **: [[http://blog.psyrendust.com/pngpong/]]
  * **License **: [[http://www.opensource.org/licenses/mit-license.php|MIT]]

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:

    * IE lacks native support for alpha channels in PNGs without the use of filters.
    * Safari lacks support for Flash movies with transparent background.

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.

===== Tutorials =====





===== Demos =====
 [[http://www.psyrendust.com/projects/pngpong/example/|Example]] - This demo shows the following examples:
  * Display a static transparent PNG
  * Display a image button using transparent PNGs - when pressed will change the browser to a new url
  * Display a image button using transparent PNGs - when pressed will call a Javascript function that pops up an alert box
  * Display a static transparent PNG and do an image swap through a Javascript call

**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.**

===== Download =====


===== Discussion =====