jquery.pngFix.js

jQueryのプラグイン「jquery.pngFix.js」

ページ上で透過PNG（アルファ付きPNG）を使いたいときに、古いIE対応のために使います。
他にも色々同じようなJavaScriptのライブラリは有るようですが、もともとサイトにjQueryを入れているならこれを使うのが手っ取り早い。使い方も簡単。

●jquery.pngFix.js
http://jquery.andreaseberhard.de/pngFix/index.html

ダウンロードして解凍するとファイルがいろいろ出てきますが、必要なのは「jquery.pngFix.js」。
これをヘッダに読み込んだ後に、例えば次のように書くと、ページ全体で透過PNGが有効になります。

$(function(){
    $(document).pngFix();
});

上記のコードは使うHTMLのヘッダに＜script＞で囲って書いても良いし、別ファイルに書いて読み込んでも良いし、jquery.pngFix.jsの最後に追記しても良いです。追記しちゃうのが簡単かも。読み込むだけで即使えるから。
使い方としてはそれだけでOKなんだけど、一応補足としては、上記の書き方だと全部の要素に適用するので、きっと動作的には若干遅くなるはず。できれば必要なところのみにした方が良いのかなと言うことで、$()の第二引数に使う場所を指定して使っている。

例えば、

$(function(){
    $(document,".className").pngFix();
});

 ※「className」は使う要素が含まれているタグのCSSクラス名。＜div class="pngBox"＞＜img src="hoge.png"＞＜/div＞なら、「pngBox」を入れる。
クラスでなくてIDなら、「.」を「#」に。

※この記事の＜＞は全角で書いてますので、コピペするときは注意。


ところで、１つ注意としては、背景画像に透過PNGを使う場合、ボックスのサイズと画像のサイズが合ってないとおかしくなります。（画像がボックスのサイズに拡大・縮小される）
それと、繰り返し（repeat）にも対応していないということです。


jQueryではないですが、背景の繰り返しにも対応している「DD_belatedPNG.js」というライブラリも有るようです。

DD_belatedPNG


※後日jQueryのプラグインでうまくいかない事態が発生。その話はこちら