【jQuery】マウスオーバーで画像を切り替える【ロールオーバー】

こんにちは、Ryohei（@ityryohei）です！

マウスオーバーした際に画像を切り替えるロールオーバーのご紹介です。

素のJavaScriptやCSSを使ってロールオーバーを実装する方法もありますが、本記事ではjQueryを使って解説していますので、予めご了承ください。

本記事の内容

• ロールオーバーとは
• imgタグのsrcを書き換えてロールオーバーする方法
• imgタグのsrcを一部置き換えてロールオーバーする方法

では解説していきます。

ロールオーバーとは

ロールオーバーとは、要素にマウスカーソルを載せた際に画像や色などが変わる動作を指します。

マウスカーソルを載せると「ぺこっ」と下に押されるようなアニメーションをするボタンをよく見かけるかと思いますが、あの動作がロールオーバーになります。ボタンに動きを付ける際に使用われることが多いですが、メニューアイテムやバナーなどに使われることもあります。

類似するものに「ホバー」や「マウスオーバー」等がありますが、左記に挙げたものはマウスを載せる動作を指しているのに対し、「ロールオーバー」は切り替わる動作のことを指しています。混同しやすい部分になりますので、しっかりと覚えておきましょう！

ロールオーバーについて理解が深まったところで、さっそく処理を記述していきます。

srcを書き換えてロールオーバーする

下記は、imgタグのsrcをすべて書き換えて画像を切り替える方法になります。

HTMLは下記を使用します。aタグでimgタグをラップしたものになります。

<a href="#">
  <img src="URL" alt="">
</a>

続いてスクリプトです。「img」と指定しているセレクタ部分と、変数に代入する値をご自身の環境に合わせて変更していただければ動作します。

eachで繰り返し処理を行っているのは、複数の要素に対応させるための処理となります。

$('img').each(function() {

  var elem = $(this);
  var offImg = $(this).attr('src');    
  var onImg = '切り替える画像のURL';

  elem.hover(
    function () {
      elem.attr('src', onImg);
    },
    function () {
      elem.attr('src', offImg);
    }
  );

});

上記を記述すると下記のデモのような動作になります。マウスオーバーすると画像が切り替わるかと思います。

See the Pen Rollover | jQuery by ryoy (@intotheprogram) on CodePen.

以上がimgタグのsrcを書き換えて画像を切り替える方法になります。

次は、imgタグのsrcの一部を書き換えて画像を切り替える方法をご紹介したいと思います。

srcの一部を置き換えてロールオーバーする

上記ではまったく別のsrcに書き換えることで画像の切り替えを実現しました。

しかし、実際にロールオーバーを実装する場合、下記のような画像ファイルを用意して切り替えることになるかと思います。

• btn_off.jpg
• btn_on.jpg

上記の場合、onとoffだけを変更すれば済みますし、管理も容易になるため、この方法で実装されることが多いです。

しかし、先程ご紹介したスクリプトではonとoffだけを置き換える、ということはできません。一部を置き換えるためには、先程ご紹介したスクリプトを少し修正してあげる必要があります。

下記が修正したスクリプトになります。

$('img').each(function() {

  var elem = $(this);
  var offImg = $(this).attr('src');
  var onImg = $(this).attr('src').replace('off', 'on');

  elem.hover(
    function () {
      elem.attr('src', onImg);
    },
    function () {
      elem.attr('src', offImg);
    }
  );

});

スクリプトの中にreplaceという記述があるかと思いますが、マウスカーソルが載った際にreplaceメソッドが「off」を「on」に置換する処理を実行しています。マウスカーソルが外れた場合は、最初にimgタグのsrcに指定された値を戻すことで画像の切り替えを実現しています。

下記は一部を置き換える方法で実装したロールオーバーになります。

See the Pen Rollover Replace | jQuery by ryoy (@intotheprogram) on CodePen.

Chromeの検証やFirefoxの開発ツールで見ていただくと、srcが置き換わっているのがお分かりいただけるかと思います。

まとめ

以上、jQueryでマウスオーバーで画像を切り替えるロールオーバーの実装方法のご紹介でした！

ロールオーバーはサイトを構築する際に必ずと言っても過言ではないくらい使用するテクニックになりますので、本記事を参考に実装していただければ幸いです。