画像のロールオーバー処理

このスクリプトの内容について

$(function()
{

 //----------------------------------------------
 // 変数宣言
 //----------------------------------------------

 //----------------------------------------------
 // コントローラーの設定
 //----------------------------------------------
 $("img").hover(imgOn,imgOut);

 //----------------------------------------------
 // 初期処理
 //----------------------------------------------

 //----------------------------------------------
 // メソッド
 //----------------------------------------------

 /*
  *
  * マウスオーバー時の画像表示用メソッド
  *
  */
 function imgOn()
 {
  var srcData = $(this).attr('src');
  srcData = srcData.replace(/(\.gif|\.jpg|\.png)/,'_on$1')
  $(this).attr('src',srcData);
 }

 function imgOut()
 {
  var srcData = $(this).attr('src');
  srcData = srcData.replace(/(_on\.)/g,'\.')
  $(this).attr('src',srcData);
 }

});

/*
 * 処理の詳細とメモ
 *
 * ■処理の順番と解説
 * overした時
 *   1：オーバーした画像のsrcを取得
 *   2：取得したsrcの中身から
 *      .gifか.jpgか.pngを探し出して
 *      _on[見つかった文字]に置換する。
 *      → 見つかったのが.gifの場合は .gif → _on.gifに変わる
 *         ./img/btn1.gif → ./img/btn1_on.gif になる
 *   3：置換結果をsrcに上書きして画像を変更する
 *
 * outした時
 *   1：マウスアウトした画像のsrcを取得
 *   2：取得したsrcの中身から _on.を探し出す
 *      _onを空で上書き(消す)
 *      ./img/btn1_on.gif → ./img/btn1.gifになる
 *   3：置換結果をsrcに上書きして画像を変更する
 *
 */