ホームページ制作はエムハンドへ

1.ロールオーバー用の画像を用意してファイル名に_oをつけます。
例：img_001.jpgとimg_001_o.jpg

2.Jqueryを読み込んで下記タグを貼りつけます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script language="JavaScript">
<!--
$('document').ready(function(){
	$('.over').hover(
		function(){
			var src = $(this).attr('src');
			var src_o = src.substr(0, src.lastIndexOf('.')) + '_o' +
			src.substring(src.lastIndexOf('.'));
			$(this).attr('src',src_o);
		},
		function(){
			var src = $(this).attr('src');
			var src = src.substr(0, src.lastIndexOf('.')-2) +
			src.substring(src.lastIndexOf('.'));
			$(this).attr('src',src);
		}
	)
});
// -->
</script>

3.ロールオーバーしたい画像にoverクラスをつけます。
例：<img class="over" src="img_001.jpg" />

--------------------

ご自由にお使い下さい。