JavaScript

attr(“src”).replace(～)を使ってマウスオーバー時の画像切替を簡単に実装する方法

  /

ウェブサイトを訪れるユーザーにとって、視覚的なフィードバックは非常に重要です。特に、マウスオーバーによる画像の変化は、ユーザーのインタラクションを向上させる効果があります。今回は、jQueryのattr(“src”).replace()メソッドを使って、簡単にマウスオーバー時に画像を切り替える方法を紹介します。

この方法は、切替前と切替後の2パターンの画像を用意し、画像のファイル名を変更するだけで実装できるため、取り組みやすい内容となっています。この記事を通じて、少しでもウェブサイトのユーザーエクスペリエンス向上に役立てていただければ幸いです。

Contents

マウスオーバー時の画像切替を実装するためのCSS

まず、マウスオーバー時に画像を切り替えるための基本的なCSSを設定しましょう。以下のコードは、ウェブページ全体のレイアウトを整えるためのスタイルです。必要に応じて調整してください。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}
-->
</style>

　
このCSSでは、ページ全体の余白を取り除き、タイトルのフォントサイズや位置を調整しています。また、#idWrapというIDを持つ要素に対して、ページ中央に配置するスタイルを適用しています。これにより、ページ全体が見やすく、ユーザーがマウスオーバー時の画像切替を直感的に理解しやすくなります。

JavaScriptでマウスオーバー時の画像切替を実装

次に、実際にマウスオーバー時に画像を切り替えるためのJavaScriptコードを見ていきましょう。このコードでは、jQueryを使用（jquery.min.jsファイルを読み込み）して、指定した条件に合致する画像のsrc属性を動的に変更します。

切替前（btn_off.jpg）と切替後（btn_on.jpg）の2パターンの画像を用意し、ページ内のimgタグに対してマウスオーバー（hover）時に画像ファイル名にある文字列「_off」を「_ov」に変更するだけです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var images = $("img");
	for(var i=0; i < images.size(); i++) {
		if(images.eq(i).attr("src").match("_off.")) {
			$("img").eq(i).hover(function() {
				$(this).attr('src', $(this).attr("src").replace("_off.", "_ov."));
			}, function() {
				$(this).attr('src', $(this).attr("src").replace("_ov.", "_off."));
			});
		}
	}
});
</script>

　
このコードは、ページ内のすべてのimgタグを対象に、画像のファイル名に_offが含まれているかどうかをチェックします。もし含まれている場合、その画像に対してマウスオーバーイベントを追加し、マウスが乗った時には_offを_ovに置き換え、マウスが離れた時には再度_ovを_offに戻すように設定します。

例えば、通常時にはbtn_off.jpgという画像を表示し、マウスオーバー時にはbtn_ov.jpgに切り替える、といった動作を実現できます。この方法は、シンプルかつ柔軟で、さまざまな場面で応用可能です。

HTMLでの実装例

次に、実際にHTMLでの実装例を見てみましょう。以下のコードでは、2つの画像を中央に配置し、マウスオーバー時に画像が切り替わるように設定しています。

<div id="idWrap">
    <h1>ページ内の画像をマウスオーバーするとファイル名「～_off.～」の画像を<br />「～_ov.～」の画像に変更して表示します。</h1>

    <div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
    <br />
    <br />
    <div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
   
</div>

　
このHTMLコードでは、idWrapというIDを持つdivタグ内に、h1タグで説明文を表示し、その下に画像を配置しています。align=”center”を使って画像を中央に配置し、2つの画像がマウスオーバー時に切り替わるようにしています。

画像ファイル名は、最初に表示する画像がbtn_off.jpgであり、マウスオーバー時にはbtn_ov.jpgに切り替わります。画像のサイズや配置は、必要に応じて調整してください。

attr.replace：ページ内の画像をマウスオーバーで切替え表示するデモページ

今回紹介した方法を使って、実際に動作するデモページを作成しました。以下のリンクから、ページ内の画像がマウスオーバーで切り替わる様子を確認できます。

attr.replace：ページ内の画像をマウスオーバーで切替え表示するデモページ

このデモページでは、ボタン画像ごとに2種類の画像を用意し、マウスオーバー時に瞬時に切り替わる動作を確認できます。もし、画像の切替が多いページを作成する場合、各画像に対応する2種類の画像ファイルを用意する必要がありますが、その手間をかけるだけの価値がある機能です。

まとめ

マウスオーバー時の画像切替は、ユーザーに対して視覚的なフィードバックを提供し、ウェブサイトのインタラクション性を向上させる効果的な手法です。今回紹介した方法は、jQueryを使って簡単に実装できるため、すぐに取り入れることができます。

この記事を参考にして、ぜひあなたのウェブサイトにもマウスオーバー時の画像切替を取り入れてみてください。ユーザーの体験を向上させ、より魅力的なウェブサイトを作り上げる一助となることを願っています。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像切替 マウスオーバー attr.replace
関連記事