このページの本文へ

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

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

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

クロスブラウザー&透過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」(共著、毎日コミュニケーションズ刊)がある。

前へ 1 2 3 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く