JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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

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

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

ボタン画像毎に2種類用意する必要があるので、切替画像が多いページは画像を用意するのが少し面倒かもしれません。

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