JavaScript 備忘録 | メシのタネ

このエントリーをはてなブックマークに追加

jQuery ロールオーバ

 2013/05/02

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

使い方

こんなの使う人いないでしょうけど、
適当にナビ用のdivとかを用意して
それにglobal_naviってID振って
中に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);
          }
              
     });
    
});

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


このエントリーをはてなブックマークに追加

コメント

"jQuery ロールオーバ"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ