JQuery：動的イメージはホバリングで置き換えますか？

Question

私はimg要素を取り、それが推移したとき、それはこのようIMGを置き換えるjQueryの機能をしたい：myimage.pngは

をmyimage2.pngするために置き換えるこれは私が思い付いたものですが、それは働いていません。

 $("#menu img").hover(function(){ 
     var split = $(this).attr("src").split(".png"); 
     $(this).attr("src", split[0]+"2.png"); 
    }, function(){ 
     var split = $(this).attr("src").split(".png"); 
     $(this).attr("src", split[0]+".png"); 
    }); 

私はベテランがもっと良いアプローチを考え出すことができると確信しています。

Answer 1

ご希望の場合は、こちらからご連絡ください。

jsFiddle（http://jsfiddle.net/ZWxEg/12/は）

<script type='text/javascript'> 

    var split = new Array(); 

    split[0] = "http://www.google.com/logos/2012/sundback12-hp.jpg"; 
    split[1] = "http://www.google.com/logos/2012/sovereignty12_hp.jpg"; 

    $(document).ready(function() 
    { 
     $(".button").hover(function() 
     { 
      $(this).attr("src" , split[1]); 
     }, 
     function() 
     { 
      $(this).attr("src" , split[0]); 
     }); 
    }); 
</script> 

<div id="menu"> 
    <img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" /> 
</div> 
​ 

Answer 2

あなたの第二の機能は、あなたがやっているすべては、それを再度追加し、「.pngの」ビットを除去してあるように、すべてのsrcの属性を変更しません。あなたは "2"も削除する必要があります。あなたはsplit('.png')をsplit('2.png')に変更できると思います。

しかし、ほとんどの場合、CSSはこれに対してはるかに良い解決策です。あなたが実際に（ギャラリーのような）画像を表示したいのでない限り、他の要素に背景画像を設定し、それらをホバーに入れ替えることができます。さらに、イメージスプライトを使用してHTTPリクエストを最小限に抑えることができます。

#menu a { 
    background: url(menu.png) no-repeat; /* menu.png contains ALL the images used in the menu */ 
    display: block; 
    width: 80px; 
    height: 20px; 
    text-indent: -1000000px; /* Remove text */ 
} 

#menu a:hover { 
    background-position: left -20px; 
}