マウスオーバーした場所に連動して画像とテキストを入れ替えるjQuery

更新日：2017年7月15日

マウスオーバーした時にそのマウスオーバーした要素自身を入れ替えたり、変化させるjQueryの記述はよく見掛けますが、
マウスオーバーした要素とは違う別の要素を入れ替えたり、変化させるjQueryの記述はほとんど見掛けなかった為、記事を作成してみました。

言葉で説明しても伝わりにくいので、いうならば下記のようなもののことです。

■赤い丸に変化（マウスをのせてね）

■青い丸に変化（マウスをのせてね）

■黄色い丸に変化（マウスをのせてね）

赤い丸は情熱的ですね

マウスオーバーするとそれに連動して画像とテキストが入れ換わりましたね。
例えば、■青い丸に変化（マウスを乗せてね）にマウスをのせると、
青い丸の画像に変化して、テキストが「青い丸は知的ですね」に変化しました。

それではどのように実装しているのかというと、HTMLで

■赤い丸に変化（マウスをのせてね）
■青い丸に変化（マウスをのせてね）
■黄色い丸に変化（マウスをのせてね）


赤い丸は情熱的ですね

と記述します。
画像のパスはあなたの環境に応じて書き換えて下さい。
また、別にこの形でHTMLを書かなければならないという訳ではありません。肝心なのはclassを当てているということです。なので今回の例の場合は
.change_btn01、.change_btn02、.change_btn03、.chenge_image、.change_text
の5つのclassが当てられたHTMLがあるということが重要です。

そしてjQueryには

$(function() {
	$(".change_btn01").hover(function() {
		$(".chenge_image").attr("src","images/red.png");
		$(".change_text").text("赤い丸は情熱的ですね");
	});
	$(".change_btn02").hover(function() {
		$(".chenge_image").attr("src","images/blue.png");
		$(".change_text").text("青い丸は知的ですね");
	});
	$(".change_btn03").hover(function() {
		$(".chenge_image").attr("src","images/yellow.png");
		$(".change_text").text("黄色い丸は明るいイメージですね");
	});
});

と記述します。
これにて完成しました。

簡単にjQueryのコードの解説をすると、
$(".change_btn01").hover(function() {
は.change_btn01にマウスオーバーしている時に…という意味になります。
今回の例でいうと、「■赤い丸に変化（マウスをのせてね）」のテキストにマウスをのせている時に…ということになります。

$(".chenge_image").attr("src","images/red.png");
は.chenge_imageの画像のパスを書き換えるというもの。
今回の例でいうと、imagesフォルダの中のred.pngに書き換えています。

$(".change_text").text("赤い丸は情熱的ですね");
は.change_textのテキストを書き換えるというものになります。
今回の例でいうと「赤い丸は情熱的ですね」というテキストに書き換えています。

紐解いてしまえば、単純なjQueryの記述を組み合わせただけのものなのですが、これらはとても汎用性のある記述です。複雑なコードも読み解けばこうした記述の組み合わせです。
皆様の一助になれば幸いです。