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

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

必要な前提知識
HTMLの準備
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");
    }
  );
});