• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

DD_belatedPNG のダウンロード

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


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" />



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください