ＣＳＳでいちいちサイズ合わせてロールオーバー作るの面倒くさいので
いつでも使えるjQueryのロールオーバー作りました。

使い方

こんなの使う人いないでしょうけど、
適当にナビ用のdivとかを用意して
それにglobal_naviってＩＤ振って
中にimg置けばおっけいです。
hoverすると、画像のアドレスが変わって、画像が変わります。

拡張子の前には_on,_offって名前付けてください。

$(function()
{

     $("#global_navi img").hover(function()　//イメージをhoverした時
     {

          var a = $(this).attr("src");　//このセレクタのsrcを取得
          
          if(a.match(/_on/))　//このsrcに_onが含まれていたら
          {
               var b = a.replace(/_on/ig,"_off");　//_offに変換する
               $(this).attr("src",b);　//それをこのセレクタのsrcにぶちこむ
          }
         
     },
     function()　//マウスアウトした時は↑の逆。
     {
          var a = $(this).attr("src");
         
          if(a.match(/_off/))
          {
               var b = a.replace(/_off/ig,"_on");
               $(this).attr("src",b);
          }
              
     });
    
});

果たして、ちゃんと動くのだろうか。