[jQuery] 画像フォーカス時の画像切り替え

• 画像にフォーカスをあてた際、画像ファイルのファイル名＋_onの画像を切り替える。
• DEMO PAGE

• imgタグのsrcのURLを、マウスが乗ったときに変更する。（画像ファイルのファイル名末尾に_onを追加）
• imgタグのsrcのURLを、マウスが降りたときに元に戻す。
• 全ての画像ではなく、指定した画像のみ変更する。

/* ◯今回はpng画像で実験を行なっている */
/* ◯png画像に_onをつけたり外したりで、画像変更を実現してる */
 $(document).ready(function(){  
  /* change image (off→on) */
  $('img.onChange').mouseover(function(){
   var onImgUrl = $(this).attr('src').replace(/\.png/ig, '_on.png');
   $(this).attr('src', onImgUrl);
  });
 
  /* change image (on→off) */
  $('img.onChange').mouseout(function(){
   var onImgUrl = $(this).attr('src').replace(/_on\.png/ig, '.png');
   $(this).attr('src', onImgUrl);
  });
 });

<!-- ◯on off変更したい画像には、class='onChange'を指定する -->
<!-- ◯画像は、デフォルトの名前＋_onを準備する -->
<img class="onChange" src="img/online.png" />
(この場合、マウスが乗っかるとsrc="img/online_on.pngとなる)