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

jQueryでロールオーバー！プリロード対応版

2009年10月29日 14時00分更新

文● 西畑一馬／to-R

汎用的なロールオーバーに改造する

　サンプル01は、ロールオーバー効果を設定したい画像の数だけ同じ処理を繰り返し記述していましたが、画像の数が多くなると手間がかかってしまい、あまり実用的ではありません。そこで汎用的に利用できるロールオーバーに改造します。

　改造後のスクリプトでは、「rollover」というclass属性を持つimg要素に対して、自動的にロールオーバーを適用します。ロールオーバー時には「xxx_on.jpg」のように、ファイル名の最後（拡張子の前）に「_on」が付いた画像に差し替える決まりです。


左「javascript.jpg」、右「javascript_on.jpg」。拡張子の前に「_on」をつけたロールオーバー時の画像を用意しておく

　HTML部分はimg要素にclass属性で「rollover」を追加します。class属性を追加するだけですので、ロールオーバーする画像が増えても特に手間はかかりません。

▼サンプル02（HTML部分）


<ul>
    <li><a href="#"><img src="images/jquery.jpg" alt="jQuery" class="rollover" /></a></li><!--
    --><li><a href="#"><img src="images/javascript.jpg" alt="javascript" class="rollover" /></a></li><!--
    --><li><a href="#"><img src="images/css.jpg" alt="CSS" class="rollover" /></a></li><!--
    --><li><a href="#"><img src="images/html.jpg" alt="HTML" class="rollover" /></a></li>
</ul>

　スクリプト部分は以下のように変更します。

▼サンプル02（スクリプト部分）


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

　セレクターでclass属性に「rollover」を持つimg要素を指定し、mouseoverイベントとmouseoutイベントでロールオーバーの処理を設定しています。

　replace(...) は、文字列（テキスト）を置換するJavaScriptの命令です。以下のスクリプトでは、マウスカーソルが重なったimg要素のsrc属性内の文字列（画像のパス）をattr()で取り出し、replace()で拡張子の前に「_on」を追加しています。置換処理には「正規表現」という方法を使っています。正規表現についてはこの後のコラムで説明しますので、ここではreplaceの中身を「ファイル名を置換するための雛形」として覚えてしまいましょう。


$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")

　mouseoutイベントでは、同じ方法を使ってファイル名の拡張子の前の「_on」を取り除き、src属性の画像のファイル名を元に戻しています。


$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));

　以上で汎用的なロールオーバーの完成です。拡張子の前に「_on」を付けたロールオーバー用の画像さえ用意しておけば、簡単にロールオーバーを実装できます。

【JavaScriptワンポイントレッスン】

文字列の置換に便利な正規表現

　「正規表現」とは、文字列の特徴を文字と特殊記号（メタ文字）の組み合わせで表したものです。正規表現を使えば、表記が揺れている文字列を一度に置換したり、特定のパターンを含む複数の文字列を抽出したりできます。正規表現はJavaScript以外にも多くのプログラミング言語で利用でき、Dreamweaverなどの多くのエディターソフトも対応しています。


Dreamweaverでは検索、置換時に正規表現を利用できる

　JavaScriptで文字列を置換するreplace()では、以下のような記述で「文字列」の中から「パターン」にマッチした部分を「置き換え後の文字列」に変更します。


文字列.replace(パターン,置き換え後の文字列)

　サンプル02で登場した、拡張子の前に「_on」を付ける処理をもう一度見てみましょう。


$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")

　$(this).attr("src") は、マウスカーソルが重なっているimg要素のsrc属性を指しますので、「images/javascript.jpg」のような文字列を取得できます。つまり、以下のスクリプトと同じ意味になります。


"images/javascript.jpg".replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")

　replace()のパターンでは、/～/ の間に正規表現を記述します。冒頭の「^」は「文字列の先頭」、最後の「$」は「文字列の最後」という意味です。^の後ろの (.+) は「1個以上の何かの文字の繰り返し」を表し、次の (\.[a-z]+) は「.(ドット) とその直後に続く1個以上のアルファベットの繰り返し」を意味します。たとえば、「images/javascript.jpg」という文字列なら、(.+) が「images/javascript」を、(\.[a-z]+) は「.jpg」の部分を指します。

　置き換え後の文字列は、$1_on$2 となっています。$1にはパターンで指定した最初の括弧の中身（images/javascript）、$2には2つ目の括弧の中身（.jpg）が入ってきます。$1と$2の間に「_on」を入れることで、ファイル名の最後に（拡張子の前に）「_on」を付ける置換処理になるわけです。

　正規表現は複雑ですが、覚えればプログラムを書く時だけでなく、Dreamweaverなどでのコーディングにも活躍します。興味がある方は勉強してみてください。

前へ 1 2 3 次へ

ツイートする