マウスオーバー時の画像切替を簡単に実装する方法【attr.replace】 DAD UNION

attr().replace()を使ってマウスオーバー時にマウスオーバーした画像の切替を実装する方法をご紹介します。
切替前と切替後の2パターンの画像を用意し、画像のファイル名を変更するだけなので簡単です。

Contents

マウスオーバー時の画像切替を実装するCSSの記述
attr().replace()を使ってマウスオーバー時にマウスオーバーした画像の切替を実装するJavaScriptの記述
マウスオーバー時の画像切替を実装するHTMLの記述
attr.replace：ページ内の画像をマウスオーバーで切替え表示するデモページ

マウスオーバー時の画像切替を実装する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>

attr().replace()を使ってマウスオーバー時にマウスオーバーした画像の切替を実装するJavaScriptの記述

※jquery.min.jsファイルを読み込みます。切替前（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>

マウスオーバー時の画像切替を実装するHTMLの記述

※切替前（btn_off.jpg）のimgタグを用意してます。必要に応じて変更して下さい。

<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>