マウスオーバーでページ内の画像をファイル名を変更する方法です。
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種類用意する必要があるので、ボタンが多いページは面倒かもしれません。