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



過去に THIS.SRC:マウスオーバー時の画像切替を簡単に実現する記述
をご紹介しましたが今回はjQueryを使用し、
マウスオーバーでページ内の画像をファイル名を変更する方法です。

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

ページ内の画像ファイル名にある文字列「_off」を「_ov」に差換え表示します。

<script type="text/javascript" src="http://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の記述例

ページ内の全てのimgタグに適用されますので、
以下は同じimgタグを2つ設定しています。

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

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

ボタン画像毎に2種類用意する必要があるので、
ボタンが多いページは面倒かもしれません。
1つの画像を薄くする程度が一番楽ですよね。