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

ウェブサイトやウェブアプリケーションでよく見られる機能の一つに、マウスオーバー（マウスカーソルが要素の上に乗ったとき）で画像が切り替わるというものがあります。このようなインタラクティブな要素は、ユーザーエクスペリエンスを向上させる効果があります。今回は、この機能をjQueryを使って実装する方法について詳しく解説します。

必要な前提知識

このチュートリアルを理解するには、基本的なHTMLとJavaScript、そしてjQueryについての基本的な知識が必要です。特に、HTMLでの要素の配置や、JavaScriptでのDOM（Document Object Model）操作に慣れていると、スムーズに進められるでしょう。

HTMLの準備

まずは、HTMLファイルを作成しましょう。以下のように、imgタグを使って画像を表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Hover Example</title>
</head>
<body>
  <img id="myImage" src="image1.jpg" alt="Image 1">
</body>
</html>

この例では、id属性にmyImageという名前を付けています。このidを使って、後でjQueryでこの画像を操作します。

jQueryの導入

次に、jQueryライブラリを導入します。以下のscriptタグをheadセクションに追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

コードの解説

jQueryの基本的なコードは以下の通りです。

$(document).ready(function() {
  $("#myImage").hover(
    function() {
      // マウスオーバー時の処理
      $(this).attr("src", "image2.jpg");
    },
    function() {
      // マウスが離れた時の処理
      $(this).attr("src", "image1.jpg");
    }
  );
});
  • $(document).ready(function() {…});: このコードは、ページが完全に読み込まれた後に実行されるものです。
  • $(“#myImage”).hover(…);: idがmyImageの要素にマウスが乗ったとき、またはマウスが離れたときに関数を実行します。
  • $(this).attr(“src”, “image2.jpg”);: マウスオーバー時に画像のsrc属性をimage2.jpgに変更します。
  • $(this).attr(“src”, “image1.jpg”);: マウスが離れたときに画像のsrc属性をimage1.jpgに戻します。

まとめ

jQueryを使ってマウスオーバーで画像を切り替える方法は非常に簡単です。このテクニックは、ウェブサイトのインタラクティビティを高めるために広く使用されています。基本的なHTMLとjQueryの知識だけで、このような高度な機能を短時間で実装することができます。

以上が、jQueryでマウスオーバーで画像を切り替える方法についての解説です。この知識を活かして、ぜひ自分のプロジェクトで試してみてください。