jQueryマウスオーバーで画像切り替え!

jQueryマウスオーバーで画像切り替え!

今回は、クリックおよびマウスオーバーで画像の切り替えについて、サンプルコードを交え詳しく記載していきたいと思います。

「複数の画像を使いたいけど、マウスオーバーで画像切り替えをおこなうには?」や「マウスが画像から外れた時は?」などの疑問に対して、jQueryの基本的な記述方法を、初心者の方でも比較的分かりやすいように、サンプルコードを用いて詳しく記載してみようと思います。

という事で、それでは今回はッ、

  • ・クリックによるイベントclick()メソッド
  • ・マウスオーバーmouseover()メソッド
  • ・マウスが外れたときmouseout()メソッド
  • ・マウスをのせたとき/外れたときmouseenter()/mouseleave()メソッド

上記について記載していこうと思います…。

クリックによるイベントclick()メソッド

前回のサンプルですでに登場しましたが、マウスのクリックをイベントにしてみます。click()メソッドを使ったサンプルを記載していきます。click()メソッドは、マウスのクリックをきっかけとするイベントです。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#trigger”).click(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike.jpg”,
“alt”: “天狗の湯”
});
return false;
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉 赤城の湯 ユートピア赤城”
width=”300″ height=”225″>
</p>
<p>
<a id=”trigger” href=”images/RoadBike.jpg”
title=”トレックエモンダ”>画像を天狗の湯に切り替える!</a>

</p>
・・省略・・
</body>
</html>

敷島温泉 赤城の湯 ユートピア赤城

画像を天狗の湯に切り替える!

a要素である#triggerをクリックすると、画像のhref属性とalt属性をattr()メソッドで書き換えて、表示される画像を変更するサンプルです。

このようにユーザーの操作によって、インタラクティブにWebページを変更していくサンプルを見ると、はやりWebデザインってステキに表現できることと思います。

まずは代表的なイベント型メソッドである、click()メソッドを記載してみました。
記述方法は、基本形をしっかりと覚えれば、それほど難しくない事と思います。

click()メソッドとa要素上記サンプルHTMLでは、リンクであるa要素に対してclick()メソッドを使用しています。
ここで少し注意が必要になります。a要素はもともとクリックされることを想定されている要素になります。リンクをクリックすれば、リンク先に移動することが通常です。
しかし、上記サンプルHTMLでは、リンク先(画像ファイル)に移動せず、同じページ内にとどまっています。このようにリンク先に移動させたくない場合は、click()メソッドのイベントハンドラ内に、return falseと記述します。なお、returm falseを削除してからリンクをクリックすると、クリックした瞬間に、リンク先である画像ファイルに移動してしまいます。

マウスオーバーmouseover()メソッド

mouseover()メソッドは、マウスをのせたときをきっかけとするイベントです。逆にマウスが外れた時のメソッドはmouseout()メソッドがあります。まずはmouseover()メソッドから記載してみます。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#trigger”).mouseover(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike.jpg”,
“alt”: “天狗の湯”
});
}).click(function(){
return false;
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉 赤城の湯 ユートピア赤城”
width=”300″ height=”225″>
</p>
<p>
<a id=”trigger” href=”#”>画像を天狗の湯に切り替える!</a>
</p>
・・省略・・
</body>
</html>

敷島温泉 赤城の湯 ユートピア赤城

画像を天狗の湯に切り替える!

サンプルHTMLのclick()をmousover()に変更しただけになります。
マウスをリンクにのせると、画像が切り替わることが確認できると思います。また、リンククリック時にページを移動させないように、メソッドチェーンでclick()メソッドをつないで、return falseとしています。

マウスが外れたときmouseout()メソッド

次にマウスが外れた時に使う、mouseout()メソッドについて記載してみます。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#trigger”).mouseover(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike2.jpg”,
“alt”: “天狗の湯”
});
}).mouseout(function(){
$(“photo img”).attr({
“src”: “images/RoadBike1.jpg”,
“alt”: “敷島温泉”
});
}).click(function(){
return false;
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉 赤城の湯 ユートピア赤城”
width=”300″ height=”225″>
</p>
<p>
<a id=”trigger” href=”#”>画像を天狗の湯に切り替える!</a>
</p>
・・省略・・
</body>
</html>

敷島温泉

画像を天狗の湯に切り替える!

コードの前半部分は、サンプルHTML2と全く同じmouseover()メソッドで、画像を変更しています。そしてメソッドチェーンでつないで、mouseout()メソッドで、マウスが外れた時の処理(元の画像に戻す)を追加しています。

マウスをのせたとき/外れたときmouseenter()/mouseleave()メソッド

実はjQueryには、マウスをのせたとき/外れたときのメソッドがもう一組用意されています。それがmouseenter()/mouseleave()メソッドです。上記のmouseover()/mouseout()メソッドとは何が異なるのか?まずはサンプルを記載してみます。

サンプルHTML4<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#trigger”).mouseenter(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike2.jpg”,
“alt”: “天狗の湯”
});
}).mouseleave(function(){
$(“photo img”).attr({
“src”: “images/RoadBike1.jpg”,
“alt”: “敷島温泉”
});
}).click(function(){
return false;
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉 赤城の湯 ユートピア赤城”
width=”300″ height=”225″>
</p>
<p>
<a id=”trigger” href=”#”>画像を天狗の湯に切り替える!</a>
</p>
・・省略・・
</body>
</html>

敷島温泉

画像を天狗の湯に切り替える!

コードは先ほどのサンプルHTML3とほとんど同じです。ただmouseover()をmouseenter()に、mouseout()をmouseleave()に変更しているだけです。実際に確認してみると分かることと思いますが、表示や挙動も全く同じです。ではこれらの2組の違いを記載してみます。

mouseover()/mouseout()メソッドとmouseenter()/mouseleave()メソッドの違い!

mouseover()/mouseout()メソッドは、子孫要素にマウスをのせたとき、外れたときもイベントが発生してしまいます。それに対して、mouseenter()/mouseleave()メソッドは、子要素にマウスがのっても、新たにイベントが発生することはありません。
あくまでセレクタで指定した外側の要素にマウスがのった/外れたを感知します。

どちらかといえば、mouseenter()/mouseleave()メソッドのほうが、想像していた通りの挙動ではないかと思います。どちらを使うかはケースバイケースですが、このような違いがあるので、しっかりと覚えておくことをオススメします。

という事で今回は、jQueryマウスオーバーで画像切り替えについて、サンプルコードを交え記載してみました。

jQuery:mouseenter()/mouseleave()メソッド大事ですね!しかしながら、実際の制作現場ではCSSで実現させることも多々ございますが、場合によっては、jQueryをも使用します。環境や見せ方により使用するスキルは異なってきますが、できる限り色々なスキルの習得を心がけることが良いのではないかと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。