PNGPong

Cross-browser solution for displaying transparent PNG’s in IE, Firefox, and Safari.

Table of Contents

Issues

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.

Here is a quote from a msdn blog post “IE7 Transparent PNG Implementation” that lists “a couple of limitations worth mentioning”:

  • Certain filters may not behave as expected due to how filters are implemented. Filters work by rendering the content of their attached element to their work surface and then modifying that surface before compositing it to the output surface. Because of this, alpha blending of a transparent PNG with non-binary transparency may lead to unexpected results. For example, applying a BasicImage filter with an opacity attribute to an IMG element with a transparent PNG will fill the work surface with the transparent PNG alpha alpha blended with a solid gray background. The work surface will then be alpha blended at the specified opacity level with whatever is under the filter.
  • MSTime does not support non-binary transparency for PNGs. This is because MSTime doesn’t understand anything other than binary index-based alpha. Because of this, transparent PNGs in MSTime elements are expected to continue to render as they do in previous versions of IE.

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 is a list of supported browser:

  • IE 3 or higher (win)
  • IE 5.1 AND 5.2 (mac)
  • Netscape 7.0
  • Mozilla 1.0 or higher
  • AOL
  • CompuServe

I was working on the redesign of www.vw.com 2007 and found that there were certain pages that we would have to build out in HTML vs all Flash. In order to keep the same consistent look and feel across all pages we needed to be able to display designs that relied heavily on transparencies.

The problem that we face is that we could use Flash to display all of our images, which would leave the Safari users with a bad web experience, or we could use good old tags and add filter support for IE. The problem with the latter is that heavy use of filters and doing image swaps can result in an unreliable experience for IE users.

Solution

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

Change Log

PNGPong version 1.0.0

Download

PNGPong is released under the MIT License.

Download PNGPong 1.0.0 (Zip file) – contains pngpong.js, pngpong.swf, swfobject.js (v1.4.4), and an example page showing how to use it. Just unzip the contents to the root of your website, and surf to http://yourdomain.com/pngpong/example/

Download PNGPong 1.0.0 Source Files (Zip file) – contains pngpong.fla, pngpong.js, pngpong.swf, and swfobject.js (v1.4.4)

Tested Browsers

  • IE 6.x (win)
  • IE 7.x (win)
  • Firefox 1.5 – 2.x (win)
  • Firefox 1.5 – 2.x (mac x86, PPC)
  • Safari 2.x (mac x86, PPC)
  • Camino 1.x (mac x86, PPC)

How it Works

PNGPong is a simple script to use. You can view an example here. All you have to do is unzip pngpong into the root of your webserver and include /pngpong/swfobject.js and /pngpong/pngpong.js into the of your HTML file.

Create an empty

and give it a unique id. Then apply some CSS to specify the width and height of your image. Now all you have to do is call the function to embed your image.

The image will be embeded into the

with id="foo".

PNGPong will do a browser check and go along 1 of 2 paths:

  1. If IE is detected the script will use SWFObject to embed pngpong.swf into the div and pass it a few variables so that the swf knows the location of the PNG file. Once pngpong.swf has loaded it will use a MovieClipLoader object to dynamically load in the PNG into a dynamically crated empty MovieClip. If you are serving up a button it will create the necessary rollover, rollout, and onpress events for swapping graphics, changing window location or calling a Javascript function.
  2. If any other browser is detected the script will embed an tag into the div. The image will have it’s visibility set to hidden and an onload event handler will be attached to the image. Once the onload event is complete the script will set the visibility to visible. Javascript functions will be attached to the image to handle rollover, rollout, and onmousedown events for swapping graphics, changing window location or calling a Javascript function.

PNGPong will handle preloading of images and can also swap images using a simple Javascript API. The script will handle the communication in the background to the appropriate assets and is transparent to the developer and user.

Code Examples

There are 5 basic Javascript functions with 8 total (when adding custom alt attributes):

Extended APIs to add custom alt tags to images:

Method Definitions

pngpong.preloadImage()Adds an image to an array of objects to facilitate image preloading.

pngpong.swapImage()Swaps an image with another image.

pngpong.serve()Embeds a static image into a div.

pngpong.serveButtonUrl()Embeds an image into a div with rollover, rollout, and onmousedown states. When pressed it will redirect the current web-page to the specified url.

pngpong.serveButtonJs()Embeds an image into a div with rollover, rollout, and onmousedown states. When pressed it will evoke a Javascript function.

pngpong.alt.serve()Extends pngpong.serve() with the ability to add a custom alt tag.

pngpong.alt.serveButtonUrl()Extends pngpong.serveButtonUrl() with the ability to add a custom alt tag.

pngpong.alt.serveButtonJs()Extends pngpong.serveButtonJs() with the ability to add a custom alt tag.

List of Parameters

Parameter Definitions

inIdName

  • Type:String
  • Desc:Id name of the div that will contain the new image.

inAltName

  • Type:String
  • Desc:Alternate text that you would like to use for the image alt attribute.

inImage

  • Type:String
  • Desc:Location of the image to be inserted.
  • Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf.

inImageOut

  • Type:String
  • Desc:Location of the image to be inserted that represents the out state of your button.
  • Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf.

inImageOver

  • Type:String
  • Desc:Location of the image to be inserted that represents the over state of your button.
  • Notes:Types include: .png, .jpg, .gif. For IE only .png files will be converted to a swf.

inFunction

  • Type:String
  • Desc:The name of the javascript function you wish to attach to the onmousedown event of the button.
  • Notes:Function calls should inlude the parenthesis fooBar().

inParams

  • Type:String
  • Desc:The parameters you would like to pass to the javascript function during the onmousedown event of the button.
  • Notes:You can pass multiple string parameters separated by commas param1, param2, param3.

inUrl

  • Type:String
  • Desc:The url location used for redirection that you wish attach to the onmousedown event of the button.
Date
April 15, 2007
Time
9:49 pm
Category
Tags
Tags: