PNGPong: フィルタもしくは複雑なJavaScriptとCSSを使用せず透明PNG表示する問題を解決するオープンソースのライブラリ

ウェブ系の開発者なら透明PNGフォーマット画像ファイルがIE5.5もしくは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ですから、以下の様で簡単で使えます。




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

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

[関連リンク]

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

公式サイト

Leave a Reply

Your email address will not be published. Required fields are marked *