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

IE6対応！jQueryで透過PNGのロールオーバーを作る

2009年11月09日 11時00分更新

文● 西畑一馬／to-R

※この記事は「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"));
    })
})