透過PNGをIE6/7/8にエラーなく反映させたい時、みなさんどのように対処されていますか？ 今回、つまずきがちなその問題に立ち向かうべく、私なりに色々と調べてみました。

有用と思しき記事に出会うたび、リンク切れだったり、ちょっと難しかったりしたので、 簡単にわかりやすく、次に自分が対応するときのことも考えて記事に残したいと思います。

今回はMach3.laBlogさんのページを参考に実際のサンプルを作っていくことにいたしました。

【参考サイト】

• IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

透過PNGをIE6で使用する際に有名なのは「DD_belatedPNG」ですが、 IE6向けのライブラリのため、IE8ではエラーが出てしまいます。

IE6/7/8全てに透過PNGを対応させるため、Mach3.laBlogさんの記事を元に、 「DD_belatedPNG」をjQueryプラグインとして移植して改造してくださった、 プログラマ気分さんの「jquery.belatedPNG.js」を使用いたします。

【参考サイト】

• DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた | プログラマ気分

1.jQuaryをダウンロード

jQueryの配布先

「Download」ボタンを押してjQuery本体をダウンロードして使います。

2.「jQuery.belatedPNG」をダウンロード

「jQuery.belatedPNG」の配布先

3.HTMLに記述

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.belatedPNG.js"></script>

4.jQueryを記述

「jquery.belatedPNG.js」は、 jQueryオブジェクトにfixPng()メソッドを提供します。

<script>
$(function(){
    $(".test").fixPng();
})
</script>

CSSを設定して透明度を50％に指定します。

<script>
$(function(){
    $(".test").fixPng().css("opacity","0.5");
})
</script>

5.body内に記述

マウスイベントが効かなくなる問題のために、 子要素に透過gifを入れます。

<a href="#" class="test">
<img src="spacer.gif" alt="CLICK" width="100" height="100" border="0">
</a>

Mach3.laBlogさんの内容をサンプルページにするとこんな感じ。

サンプルページ（1）

マウスイベントが効かなくなる問題も解決されて、 opacityもきちんと反映されています！

6-1.応用

ボタンとして利用する場合、できればマウスオーバーの機能をつけたいですよね。 そこで、jQueryを使ってマウスオーバーに透明度を設定します。 下記のサイトを参考にjQueryを書きます。

【参考サイト】

• 画像や文字の透明度を利用したロールオーバー | THE HAM MEDIA BLOG

    $(document).ready(function(){
    $("a").hover(function(){
            $(this).fadeTo("fast",0.5);
        },
        function(){
            $(this).fadeTo("fast",1.0);
        });
    });

サンプルページ（2）

6-2.応用

もっといい方法があるかとは思いますが、さらにボタンの種類が数種類ある場合、 自由な位置にボタンを置きたい場合などもpositionを利用して配置を行ってやれば、スムーズに動いてくれます。

サンプルページ（3）

参考ページ

■IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

■DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた | プログラマ気分

■DD_belatedPNG: Medicine for your IE6/PNG headache!

■画像や文字の透明度を利用したロールオーバー | THE HAM MEDIA BLOG