【JQuery】マウスオーバーで画像とテキストが変わる

2023年5月12日

今回はこのようにサムネイルをマウスオーバーすると画像が変わって、テキストも変化するJQueryを実装してみたので覚書ように残しておきます。

★この記事の目次★

1. フォルダーを作る
2. HTMLファイル
3. CSSファイル
4. jsファイル

フォルダーを作る

ディレクトリはこのようになります。

フォルダーの中に【index.html】ファイルと3つのフォルダーを同じ階層に作ります。

フォルダーはそれぞれ【CSS】、【JS】、【images】と名前をつけました。

【CSS】フォルダーには【reset.css】と【style.css】
【js】フォルダーには【jQuery】と記述するjsファイル【script.js】
【images】フォルダーには画像4枚。

花の画像はこちらからダウンロードしました。

無料写真素材なら【写真AC】

HTMLファイル

<head>の中には2つのCSSを入れていきます。

このとき必ず【reset.css】を先に記述しましょう。

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

<body>にはこのように記述します。

</body>の直前に2つのjsファイルを記述します。
このとき必ず【jquery】を先に、記述する【script.js】を後で記述するようにします。

<body>
  <div class="wrapper">
  <div id="viewer">
    <img src="images/01.jpg" class="change_image">
    <p class="change_text">満開のさくら</p>
  </div><!--#viewer-->
  <div class="item">
  <img src="images/01.jpg" alt="" class="change_btn01">
  <img src="images/02.jpg" alt="" class="change_btn02">
  <img src="images/03.jpg" alt="" class="change_btn03">
  <img src="images/04.jpg" alt="" class="change_btn04">
  </div>
  </div>
  <script src="js/jquery-3.6.1.min.js"></script>
  <script src="js/script.js"></script>
</body>

CSSファイル

【style.css】はこのように記述して整えておきます。

.wrapper {
	width: 1000px;
	margin: 0 auto;
}
#viewer {
	display: flex;
	align-items: center;
}
.change_image {
	width: 640px;
}
.item img {
	display: block;
	width: 160px;
	margin: 0;
}
.item {
display: flex;
}
p {
	font-size: 2rem;
}

jsファイル

次に【script.js】はこのように記述します。

$(function(){
	$(function() {
		$(".change_btn01").hover(function() {
			$(".change_image").attr("src","images/01.jpg");
			$(".change_text").text("満開のさくら");
		});
		$(".change_btn02").hover(function() {
			$(".change_image").attr("src","images/02.jpg");
			$(".change_text").text("元気いっぱいのひまわり");
		});
		$(".change_btn03").hover(function() {
			$(".change_image").attr("src","images/03.jpg");
			$(".change_text").text("誠実なマーガレット");
		});
		$(".change_btn04").hover(function() {
			$(".change_image").attr("src","images/04.jpg");
			$(".change_text").text("あざやかなあじさい");
		});
	});
});

これで下のサムネイルにマウスを乗せると上の画像とテキストが入れ替わるjQueryを実装することができました。

＊＊＊＊＊＊＊＊＊＊

参考にした本