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

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

クロスブラウザー＆透過PNG対応のロールオーバー

　IE6を含むクロスオーバー対応の透過PNGロールオーバーは、ブラウザーによって処理を分岐させ、IE6の場合はAlphaImageLoaderのsrc属性を、それ以外のモダンブラウザーではimg要素のsrc属性をjQueryで操作することで実現できます。用意するHTMLとCSSはサンプル01とまったく同じです。

▼サンプル03（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>

▼サンプル03（CSS部分）

div{
    width:600px;
    height:400px;
    background:url("images/background.jpg");
    margin:100px auto;
}
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（スクリプト部分）

$(function(){
    $("img.rollover").each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
    })
    
    
    if($.browser.msie && $.browser.version<7){
        $("img.rollover").each(function(){
            
            $(this)
                .data("src",$(this).attr("src"))
                .attr("src","images/transparent.gif")
                .css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src")+"',sizingMethod='scale')")
            
        }).mouseover(function(){
            $(this).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")+"',sizingMethod='scale')")
        }).mouseout(function(){
            $(this).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src")+"',sizingMethod='scale')")
        })
        
    }else{
        $("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"));
        })
    }
})

　かなり長いソースコードですので、細かく分割して解説します。冒頭の2行目から4行目は画像のプリロード（先読み）処理です（関連記事）。ロールオーバー後に表示する画像をimg要素で内部的に作成し、キャッシュしておきます。内部的に作成するimg要素のsrc属性には、HTMLからclass属性が「rollover」のimg要素のsrc属性を取得し、ファイル名の最後（拡張子の前）に「_on」を付けた値を設定しています。

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

　次に登場するif文(関連記事)では、ブラウザーによって処理を分岐させています。条件式の $.browser.msie はブラウザーが「IE」の場合のみ正しくなり、$.browser.version<7 はブラウザーのバージョンが7未満（6以下）の場合だけ正しくなります。つまりこのif文では、IE6以下のブラウザーではif(){...}内の処理を、それ以外のブラウザーではelse{...}内の処理を実行します。

if($.browser.msie && $.browser.version<7){
    (中略：IE6以下に対する命令)
}else{
    (中略：IE6以下以外に対する命令)
}

　IE6以外のブラウザー向けの処理は、基本のロールオーバー（サンプル01）とまったく同じです。img要素のsrc属性の値（画像のファイル名）を正規表現で置換しています。

$("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"));
})

　続いてIE6向けの処理を見てみましょう。class属性が「rollover」のimg要素に対して、each(関連記事)を使って同じ処理を繰り返し実行しています。処理の内容は、（1）初期設定、（2）mouseoverイベント、（3）mouseoutイベント(関連記事)の3つです。

$("img.rollover").each(function(){
    //img.rolloverに対する初期設定（1）
}).mouseover(function(){
    //マウスオーバーイベント時の命令（2）
}).mouseout(function(){
    //マウスアウトイベント時の命令（3）
})

　（1）のimg.rolloverに対する初期設定では、サンプル02のCSSと同じ状況をjQueryで作ります。まず、jQueryのdata()という命令を使ってsrc属性の値を保存しています。data()は、任意のデータをHTMLの要素に関連付けて一時的に保存しておく命令です。$(this).data("src",$(this).attr("src"))では、img要素に対して「src」という名前で、現在のsrc属性の値を保存しています。src属性の値を保存したのは、後ほどCSSのfilterプロパティに指定するためです。

　次にattr()でsrc属性の値をダミー画像（1px×1pxの透過GIF「transparent.gif」）に置換し、最後にcss()を使ってfliterプロパティのAlphaImageLoaderで透過PNGを設定します。AlphaImageLoader内のsrc属性には、先ほどdata()で保存しておいたsrc属性の値、つまり透過PNG画像のパス名を設定します。これでIE6向けの初期設定ができました。

$(this)
    .data("src",$(this).attr("src"))
    .attr("src","images/transparent.gif")
    .css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src")+"',sizingMethod='scale')")

　マウスオーバー時にはAlphaImageLoader内のsrc属性を書き換えます。先ほどdata()で保存しておいた画像のパスの値を取り出し、正規表現でファイル名の最後（拡張子の前）に_onを付けた値に変更します。

$(this).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")+"',sizingMethod='scale')")

　マウスアウト時には同様に、AlphaImageLoader内のsrc属性を元のPNG画像に戻しています。

$(this).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+$(this).data("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")+"',sizingMethod='scale')")

　以上で、IE6を含むクロスブラウザーで動作する透過PNG対応のロールオーバーが完成しました。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。