IE7の自動更新が2008年2月13日に始まるそうなので「昔は透過pngが使えなかったんだよね。IEの実装がダメダメでさぁ～」なんて言う時代がそのうち来るのかなぁと思いつつも、実際問題としてはまだまだIE6のシェアは無視できないですよね。特にアルファ画像をIE6で扱うのは悩みどころです。しかし現在では数多くの方がIE6でアルファチャンネルを持ったpngを表示させる方法を公開していらっしゃいます。

• アルファ画像を扱うalphafilter.jsライブラリ - to-R
• 僕も半透明 png を使うためのライブラリ作った！ -IT戦記
• IE6でアルファチャンネルを含むPNGを表示する -ウノラボ
• IEでアルファチャンネルPNGを表示する （iepngfix.htc）-youmos
• 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる -DesignWalker

ほぼこれで事足りてしまうので、今更という感はありますが･･･今回はそれをjQueryのプラグインで実現するというお話です。jQueryを使っている方は一考の価値があるのではないでしょうか。導入も非常に簡単です。

まずは、jQuery本体とIEで透過pngを使うためのjQueryプラグイン「IE PNG Fix」をダウンロードします。そしてhtmlのhead内に次のように書きjQuery本体とプラグインを読み込みます。

<script src="jquery-1.2.1.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pngfix.js" type="text/javascript" charset="utf-8"></script>

srcの部分はフォルダ構成によって変えてください。これで使う準備ができました。ページ内すべてのimg要素に対して適用したい場合は次のようにスクリプトを書きます。

$(document).ready(function() {
$("img").pngfix();
});

これだと透過情報を持たないjpgなど全てのimg要素に適用されてしまうので、ちとスマートなやりかたではありませんね。もう少しスクリプトを変えて、pngのみに適用させたい場合は次のように書きます。

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

さらに「特定のid=”foo”にも適用させたい」と言った場合はカンマで区切って次のように書きます。

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

IE PNG Fixに実際に適用させたサンプルファイルも置いてあります。なおこのプラグインはMIT Licenseで提供されているので、著作権表示を消さなければ自由に使うことができます。(ダウンロードすれば最初から著作権表示は書いてあります)

関連エントリー

• 使えそうなjQueryプラグイン
• IE6で隣接セレクタを使うには
• シマシマなテーブルをjQueryで作る
• コーディングコンテストの種明かし
• jQueryを使ってCSS切替機能を実装
• jQueryを使ったアコーディオンメニュー
• jQueryの基礎知識
• jQueryでフォントサイズ切替機能
• jQueryでクロスフェードをやってみる
• jQueryでCSS3を先取り！

• Category
  • jQuery
• 3 件のコメント
• TrackBack URL

このエントリーのトラックバックURL

http://www.lllcolor.com/web/jquery/92.html/trackback