jQueryで画像のロールオーバー時にソースを変更する方法

2024-04-02

jQueryを使用して画像のロールオーバー時にソースを変更する方法

jQueryを使用して、画像にマウスオーバーした時に画像ソースを変更する方法を紹介します。この方法は、画像を切り替えたり、別の画像を表示したりするのに役立ちます。

必要なもの

jQueryライブラリ
HTMLファイル
画像ファイル

手順

HTMLファイルにjQueryライブラリを読み込みます。

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

画像要素に id 属性または class 属性を追加します。

<img id="my-image" src="image1.jpg" alt="Image">

jQueryを使用して、マウスオーバーイベントとマウスアウトイベントを処理します。

<script>
$(document).ready(function() {
  $("#my-image").on("mouseover", function() {
    $(this).attr("src", "image2.jpg");
  });

  $("#my-image").on("mouseout", function() {
    $(this).attr("src", "image1.jpg");
  });
});
</script>

コード解説

$(document).ready(function() { ... });：この部分は、DOMContentLoadedイベントが発生した時に実行されます。
$("#my-image").on("mouseover", function() { ... });：この部分は、#my-image 要素にマウスオーバーした時に実行されます。
$(this).attr("src", "image2.jpg");：この部分は、現在の画像ソースを image2.jpg に変更します。

応用

複数の画像を切り替える
画像の上に別の画像を重ねる
画像をフェードイン/フェードアウトする

注意事項

上記のコードは基本的な例です。必要に応じてコードを変更してください。
画像ファイルのパスは、実際の環境に合わせて変更してください。

補足

上記のコードは、IE8以下では動作しません。
画像の切り替え速度を変更したい場合は、$.fn.animate() メソッドを使用できます。

改善点

コードをより簡潔にするために、$.hover() メソッドを使用できます。
画像のプレロードを行うことで、画像の切り替え速度を向上させることができます。

上記のコードは、あくまでも参考例です。ご自身の目的に合わせてコードを修正してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery ロールオーバー画像切替え</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <img id="my-image" src="image1.jpg" alt="Image">

  <script>
  $(document).ready(function() {
    $("#my-image").on("mouseover", function() {
      $(this).attr("src", "image2.jpg");
    });

    $("#my-image").on("mouseout", function() {
      $(this).attr("src", "image1.jpg");
    });
  });
  </script>
</body>
</html>

上記のコードは、image1.jpg と image2.jpg という2つの画像を用意します。
#my-image 要素にマウスオーバーすると、画像ソースが image2.jpg に変更されます。

実行方法

上記のコードをHTMLファイルに保存します。
HTMLファイルをブラウザで開きます。
#my-image 要素にマウスオーバーすると、画像が切り替わります。

画像のロールオーバーに使える他の方法

CSSのみ

background-image プロパティと :hover 擬似クラスを使用して、背景画像を切り替えることができます。
メリット：軽量でシンプル
デメリット：画像のサイズや位置を変更できない

.image-container {
  background-image: url("image1.jpg");
}

.image-container:hover {
  background-image: url("image2.jpg");
}

JavaScript (jQuery 以外)

onmouseover イベントと onmouseout イベントを使用して、画像ソースを変更できます。
メリット：jQuery を読み込む必要がない
デメリット：jQuery より記述量が多くなる

<img id="my-image" src="image1.jpg" alt="Image">

const image = document.getElementById("my-image");

image.addEventListener("mouseover", () => {
  image.src = "image2.jpg";
});

image.addEventListener("mouseout", () => {
  image.src = "image1.jpg";
});