attr.replace：マウスオーバー時の画像切替を簡単に実現する記述

マウスオーバーでページ内の画像をファイル名を変更する方法です。

1．読込むJsとJavaScriptの記述例

ページ内の画像ファイル名にある文字列「_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>

2．HTMLの記述例

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

    
    

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

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

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