このページの本文へ

DESIGN 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
半透明の透過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ではメニューが塗りつぶされて表示されます。

サンプル01の実行画面
IE6以外のモダンブラウザーでは適切に動作するIE6では透過部分が適切に処理されていない
jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング