[JS]IE6でも透過PNGが使えるようになるJavascript「DD_belatedPNG」｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]IE6でも透過PNGが使えるようになるJavascript「DD_belatedPNG」

スポンサード

WEBサイトを作っていると「透過画像」を使うことが多いのですが、一番の悩みは「IE6では透過画像が正常に表示されない」ので、こいつの対応をどうしてあげるか…です。> <;

IEでも7以降や他のブラウザであれば問題なく表示されますので、IE6だけに透過画像を表示させる処理を施してあげる必要がありますが、そこで便利なスクリプトが「DD_belatedPNG」です。

このjavascriptr ファイルを <head> 内にちょいと置いて、透過画像のimg タグに任意のクラスを付けてあげると、IE6 でも正常に透過画像が表示されるようになります。

DD_belatedPNG のダウンロード

以下のサイトからDD_belatedPNG の最新版スクリプトをダウンロードします。

Drew Diller’s blog

DD_belatedPNG を設置

DD_belatedPNG のjavascript ファイルを <head> 内に設置します。

<!--[if lte IE 6]>  
<script type="text/javascript" src="./DD_belatedPNG_0.0.8a.js"></script>
DD_belatedPNG.fix('img.pngFix');
<![endif]-->

透過画像のimgタグに pngFixクラスを付ける

クラス名が pngFix の画像に対して、IE6 でも透過PNG画像が正常に見えるようになります。

<img src="sample.png" class="pngFix" />

スポンサード

[JS]IE6でも透過PNGが使えるようになるJavascript「DD_belatedPNG」

DD_belatedPNG のダウンロード

DD_belatedPNG を設置

透過画像のimgタグに pngFixクラスを付ける

コメント

コメントを残すコメントをキャンセル