Web制作の現場で使えるjQuery　UIデザイン入門 ― 第18回

IE6対応！jQueryで透過PNGのロールオーバーを作る (1/3)

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第18回です。過去の記事もご覧ください。

　前回はナビゲーションメニューに「ロールオーバー」効果を付けるスクリプトを作成しました。今回は、Webデザインの幅を広げる透過PNG画像を使ったロールオーバーの作成方法を解説します。透過PNGはInternet Explorer（IE） 6が標準でサポートしていないため、クロスブラウザー対応には工夫が必要です。

今回制作するサンプル

透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している（画像クリックでサンプルページを表示します）

ロールオーバーの基本部分をおさらい

　「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML／XHTML（以下、HTML）を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。

半透明の透過PNG画像を用意する。画面はPhotoshopで開いたところ。市松模様が透明部分

▼サンプル01（HTML部分）

<ul>
    <li><a href="#"><img src="images/jquery.png" alt="jQuery" class="rollover" /></a></li>
    <li><a href="#"><img src="images/javascript.png" alt="javascript" class="rollover" /></a></li>
    <li><a href="#"><img src="images/css.png" alt="CSS" class="rollover" /></a></li>
    <li><a href="#"><img src="images/html.png" alt="HTML" class="rollover" /></a></li>
</ul>

　CSSは次のようになります。li要素をfloatプロパティで横並びにしています。

▼サンプル01（CSS部分）

ul{
    padding: 10px;
    margin:0;
}
ul li{
    width:140px;
    height:40px;
    list-style-type:none;
    float:left;
}
ul li img{
    width:140px;
    height:40px;
    border:none;
}

　スクリプト部分は前回のサンプル03（関連記事）とまったく同じです。

▼サンプル01（スクリプト部分）

$(function(){
    $("img.rollover").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
    })
})

　これで基本となるロールオーバーが完成しました。サンプル01をブラウザーで開くと、IE6以外のモダンブラウザーではメニューの背景が透けて表示されます。一方、透過PNGに対応していないIE6ではメニューが塗りつぶされて表示されます。

IE6以外のモダンブラウザーでは適切に動作する

IE6では透過部分が適切に処理されていない