_on _off で画像ボタンの切り替え

画像の最後に｢_on｣｢_off｣をつけてフォルダの中に入れておくだけ

ボタン（img）にクラス指定(rollover)


 js側

$("img.rollover").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_off(\.[a-z]+)$/,"$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1_off$2"));
});

-解説-

$("img.rollover").mouseover(function(){
 $(this).attr("src","★★★");
});

mouseover…マウスイベント（マウスオーバーのとき）


.attr（）…属性の置き換え（srcに★★★にさしかえてね）

★★★…「_off」の部分を「_on」に差し替えるものが入る


★★★の部分↓

$(this).attr("src",$(this).attr("src").replace(/^(.+)_off(\.[a-z]+)$/,"$1_on$2"));

●文字列の差し替え　javascript

文字列.replace(パターン,置き換える文字列)

パターンの部分↓
　・/～/の間に正規表現をかく
　・「^」文字列の先頭を意味さす
　・「$」文字列の最後を意味さす
　・「(.+)」1以上の何かの繰り返し(img/ooo)
　・「(\.[a-z]+)」ドットと何かのa～zまでの繰り返し(.pngなど)

置き換えるものの↓
　・「$1」最初の（）カッコ
　・「$2」2個目の（）カッコ


◆正規表現
文字列の特徴と特殊記号の組み合わせであらわしたもの




-------------------　参考サイト　---------------------
正規表現色々↓

・誰かのホームページ　Java Script - Tips Menu
http://www.24w.jp/study_contents.php?bid=other&iid=other&sid=other&cid=001

http://www.24w.jp/study_contents.php?bid=javascript&iid=javascript&sid=string&cid=004