ウェブ系の開発者なら透明PNGフォーマット画像ファイルがIE５．５もしくはIE6.Xなどでは正常で表示出来ないことは知ってるはずと思います（IE6ならPNGの透明部分は#DBEAEDの用法色が表示されてしまう）。　

今回紹介する「PNGPong」とは、フィルタもしくは複雑なJavaScriptとCSSを使用せずIEやFireFoxとSafariなどブラウザに透明PNG表示する問題を解決するオープンソースのライブラリです。

PNGPongはMITライセンスでリリースされていますので、商用でも可能です。以下のブラウザにテストされました。

  • 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)

PNGPongはシングルScriptですから、以下の様で簡単で使えます。

  1. <script src="/pngpong/swfobject.js" type="text/javascript"><!--mce:0--></script>
  2. <script src="/pngpong/pngpong.js" type="text/javascript"><!--mce:1--></script>

※swfobject.jsについて、以前の「SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ」を参考してください。

ユニークIDをつける空の<div></div>を用意して、画像の幅と高さが指定されているCSSを使用して、JS関数を読んで透明PNGファイルを埋め込めます。

[関連リンク]

http://blog.psyrendust.com/pngpong/ 

公式サイト

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Posted on Monday, 8th June 2009 by admin

Tags: , , , , ,
Posted in Ajax/JavaScript, Flash Project | Comments (0) | 1,611 views

Leave a Reply