PNGPong v1.0.0: Displaying transparent PNGs in IE

I’d like to announce the first public release of PNGPong, a cross-browser solution for displaying transparent PNGs on the web for IE, Firefox, and Safari.

Download Links

For more details check out the PNGPong project page.

It’s been tested by several developers and QA people and is in use for a high traffic site. Please note that the Javascript API and functionality was created out of the needs of a specific project. I’d be happy to hear your thoughts on improvements.

Thanks for checking this out.

Date
April 17, 2007
Time
1:41 am
Category
Uncategorized
Tags
Tags: , , , , , ,


  • fil

    i have a similar problem in safari with transparent flash/swf.
    i dont think it has anything to do with this issue, but still very interesting to know…

    the flash works fine, but if i put several swf over each other, using css and z-index, then all my flashfilters (like dropshadow) are screwed. they start ‘flashing’ and turn completely black.
    i only seem to have this problem in safari, and when i put different swf over each other.

    i use transparent png in the flash, those pngs have the dropshadow on them.

    if i use exactly the same code+files, but without the swfs overlapping, it works fine. once i overlap them, its fucked…

    is there a solution for this?

  • Adam

    Hey Larry. You might remember me as the guy who built the maintenance schedule tool that you ended up mostly recoding (sorry) when you were at CPB :)

    I’m working on some new pages for them and trying to make use of pngpong. It still works on the live site, but my attempts to use it locally only work in non-IE browsers, where the regular png appears.

    In fact your example here isn’t working in IE 6 or 7 either. Any ideas?

  • http://www.psyrendust.com Larry

    I’ve been running on a Mac since I left CP+B. I’ll take a look at this today and see what the problem is. I’m getting the same issue as you.

  • http://www.psyrendust.com Larry

    Well I found the issue. I popped open WinXP through Parallels and found the same issue as you did. I used Charles to figure out the problem.

    Seems that I had moved my copy of swfobject.js from /global/swfobject.js to /global/js/swfobject.js. Once I updated this path in the html file located at http://www.psyrendust.com/projects/pngpong/example/ everything seemed to work ok.

    Adam let me know if you still need any help on this. Thing to note is that you should check to see if your paths to swfobject.js, pngpong.js, and pngpong.swf are all in the proper locations on your server. I’m working on another version that I plan to release in the next few week that removes the dependency on http://blog.deconcept.com/swfobject/.

  • LIUHUAN

    GREAT ONE!!

  • Idetrorce

    very interesting, but I don’t agree with you
    Idetrorce

  • Micah

    Am I missing something here? I can now see the image and alpha trans looks great on my !E6 box, BUT if I delete the flash viewer on that machine I can’t see anything? I’ve used the swfobject.js before, but it has been a while. Do I need to change something in the js file?

    Micah

  • Orion

    * Download links are dead.

    Here are some questions.

    * Will any image be displayed in IE6 if user does not have flash player?
    * I was reading the documentation and found this “If any other browser is detected [other then IE6] the script will embed an tag into the div” What does that mean exactly? Will this work the same as setting background for a div in a stylesheet?
    * Does anyone know where I can download PNGpong?