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>内に設置します。|
1 2 3 4 |
<!--[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画像が正常に見えるようになります。|
1 |
<img src="sample.png" class="pngFix" /> |
コメント