クロスブラウザー＆透過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対応のロールオーバーが完成しました。

ツイートする

カテゴリートップへ

この連載の記事

• 最終回   実務で使えるjQueryプラグイン3選
• 第25回  制作現場で役立つjQueryプラグインの使い方
• 第24回  jQueryとAjaxで作るスムーズページング
• 第23回  jQuery＋CSSによるカルーセルパネルの作り方
• 第22回  jQueryでバリデーション付きメールフォームを作ろう
• 第21回  jQueryで自作するフローティングウィンドウ
• 第20回  jQueryによるLightbox風モーダルウィンドウの作り方
• 第19回  jQueryで作る多階層ドロップダウンメニュー
• 第17回  jQueryでロールオーバー！プリロード対応版
• 第16回  透過PNG対応！jQueryでオリジナルツールチップ
• この連載の一覧へ

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

• Web制作の現場で使えるjQuery　UIデザイン入門（目次）

• 【短期集中連載】この冬作ろう！jQueryプラグイン講座

• jQueryで作るAmazon流リキッドレイアウト

• jQueryで作る“Amazon風”インターフェイス

• あのFlashサイトのUIをjQueryで作る

• jQueryアニメ＆エフェクト合わせ技で画像を拡大

• jQueryでクールなくるくるウィジェットを作ろう

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識730 users

2. 10分でわかる！ jQuery Mobileのキホン98 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2213 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1682 users

9. 30分でできる！Webサイトを高速化する6大原則1497 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• 組織をまたいでも快適に！HPがクライアント仮想化を強化

  

• ベルメゾン、小西真奈美さん起用のTVCM開始

• 女子中高生が持ちたいスマホ、iPhoneが85％

• カウネット、春夏カタログ発刊…テーマは「選びやすさと気づき」

• HP、世界初の液晶一体型ワークステーション「HP Z1」を発表