mouseenterとmouseleaveを使ってimgのsrc要素を入替える【jQuery】｜DAD UNION

Webサイトのインタラクティブな部分を作りたいと思ったことはありませんか？特に、ユーザーがマウスを使って何かアクションを起こしたときに、視覚的な変化が起きるようなエフェクトを加えたい場合、JavaScriptやjQueryを使うのが一般的です。今回は、エンジニアやWebデザインに興味を持ち始めた方に向けて、jQueryを使って画像のsrc要素を切り替える方法について詳しく説明していきます。

この記事を読むことで、基本的なJavaScriptやjQueryの使い方を理解し、実際にコードを書いて動作を確認することができるようになります。また、初心者でも無理なく進められるように、コードの説明や注意点も丁寧に解説していますので、安心して学んでいただけるはずです。

では、具体的な例を通して学んでいきましょう！

Contents

jQueryとは？
マウスオーバーとマウスアウトとは？
必要な準備
マウスオーバーとマウスアウトを使った画像の切り替え
jQueryを使った画像の切り替え
HTMLでの実装
mouseenterとmouseleaveを使ってimgタグのsrcを入れ替えるデモページ
まとめ

jQueryとは？

まず、jQueryについて少し触れておきます。jQueryは、JavaScriptを簡単に書くためのライブラリです。JavaScript自体も強力な言語ですが、ブラウザ間の互換性やDOM操作の複雑さを簡単にするために、jQueryが広く使われています。jQueryを使うことで、より少ないコードで、より簡潔に、そして直感的にWebページに動きを加えることができます。

マウスオーバーとマウスアウトとは？

「マウスオーバー」と「マウスアウト」とは、Webページ上でユーザーがマウスカーソルをある特定の要素に重ねたとき、あるいはその要素から外れたときに発生するイベントです。これらのイベントを活用することで、ユーザーが特定のアクションを行った際に、画面上で何らかの変化を見せることができます。例えば、画像が切り替わったり、色が変わったりといった効果を実装することが可能です。

必要な準備

jQueryを使うには、まずjQueryのライブラリをWebページに読み込む必要があります。通常、このライブラリは外部から読み込む方法が一般的です。以下のようなコードをHTMLファイルに追加することで、jQueryが使えるようになります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

上記のコードは、Googleが提供しているjQueryのホストサービスを利用しています。これを追加するだけで、ページ全体でjQueryが利用可能になります。

マウスオーバーとマウスアウトを使った画像の切り替え

それでは、具体的なコードを見ていきましょう。まずはCSSの記述です。ここでは、画像が表示される領域のスタイルを設定します。ユーザーが操作するエリアを「.clMouseArea」というクラスで定義し、そのスタイルを指定します。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.clMouseArea{
	width:150px;
	margin:0 auto;
	border:solid 1px #CCCCCC;
	cursor:pointer;
}
</style>

このスタイル設定により、ページ全体のフォントやレイアウトが整えられ、画像が表示されるエリアが中央に配置されます。また、マウスカーソルがそのエリア上にあることを視覚的に示すために、カーソルが「pointer」状態に変わります。

jQueryを使った画像の切り替え

次に、jQueryを使って画像を切り替えるコードを見ていきましょう。ここで使うのは、.clMouseAreaクラスに対するマウスオーバーとマウスアウトのイベントです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".clMouseArea").live({
		mouseenter:function(){
			$(".clMouseArea img").hide().attr('src','mouseenter.jpg').fadeIn(500);
		},
		mouseleave:function(){
			$(".clMouseArea img").hide().attr('src','mouseleave.jpg').fadeIn(500);
		}
	});
});
</script>

このコードでは、ユーザーが画像のエリアにマウスを乗せたとき（mouseenterイベント）、画像がフェードアウトし、指定した画像に切り替わった後、再びフェードインするという動作が行われます。また、マウスを離したとき（mouseleaveイベント）にも同様の処理が行われ、元の画像に戻ります。

HTMLでの実装

実際にHTMLにこのコードを組み込んでみましょう。以下がその例です。

<div class="clWrap">
    <h1>以下の「no mouse」画像をマウスオーバー（mouseenter）・マウスアウト（mouseleave）で画像が切り替わります。</h1>

	<div class="clMouseArea">
    <img src="nomouse.jpg" width="150" height="150" alt="マウスオーバーするエリアの画像" />
    </div><!--/clMouseArea-->

</div><!--/clWrap-->

このコードにより、div要素の中に画像が配置され、その画像がマウスの動きに応じて切り替わるようになります。特に、imgタグのsrc属性が切り替わることで、画像自体が変わるというシンプルながら効果的な仕組みを実現しています。