jQueryで、透過pngをIE6に対応させる

jQuery2008年12月7日

2008月11月現在、IE7の世界におけるシェアは47.39％を占めています。
（Net Applicationsより）
確実にIE6→IE7への移行は進んでいますが、まだまだIE6は無視できないのが現状です。
色々な方が透過pngをIE6でも機能させる方法をご紹介されていますが、実はjQueryのプラグインを使用する事で、あっさりIE6にも透過pngを対応させることができます。
「IE7.jsで対応」「iepngfix.js」といった方法もあるにはありますが、前者はちょっと反則的な気がしますし、後者は余計なソースがどんどん増えますし、マニアックなバグの調整作業をしなければならないのが難点です。

jQueryであれば、きちんとブラウザがサポートされているので安心ですし、余計なコードも増えません。（2～3行ほど記述するだけ）
以前の記事をひっくり返すようですが、jQueryで実装するのが最もベターだと思います。
それでは以下、実装方法です。

プラグインをダウンロード

まずは、jQuery本体に加え、プラグイン「IE PNG Fix」をダウンロードし、jQuery本体およびプラグインを読み込みます。

<script src="任意のパス/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="任意のパス/pngfix.js" type="text/javascript" charset="utf-8"></script>

jQuery.jsの下部にコードを記述

$(document).ready(function() {
$("img[@src$=png]").pngfix();
});

以上です。（簡単！！！）
ちなみに、特定のidやclassに指定する場合は、下記のように記述します。

$('div#sample').pngFix();

jQuery本体同様、MIT Licenseで提供されているので、自由に商用利用も可能です。
下記の記事にて別の方法も紹介していますので、参考までにどうぞ。

• IE6以下をIE7と同じ解釈にするjavascript「IE7.js」
• 「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法

• はじめてのjQuery
• jQueryでオリジナルツールチップを使用する

この記事を読んでいる方にオススメの記事

• jQueryニュースティッカーをjQueryで実装する／bxslider編
• jQueryグローバルナビゲーションのカテゴリを自動でアクティブにする
• jQueryjQueryで画像のロールオーバーを実装
• jQuery順序付きリスト[Ordered List]の昇降を逆にする
• jQuery超便利！jQueryでJSONデータを解析し、HTMLに表示する／前編
• jQueryjQueryでオリジナルツールチップを使用する

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。