0

img 要素を受け取る Jquery 関数が必要です。ホバーすると、次のように img が置き換えられます。 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");
    });

退役軍人はもっと良いアプローチを思い付くことができると確信しているので、お願いします。

4

2 に答える 2

2

src2番目の関数は、「。png」ビットを削除してから再度追加するだけなので、属性をまったく変更しません。「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;
}
于 2012-04-26T00:45:04.243 に答える
0

Hope this helps, let me know if you have any questions.

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>
​
于 2012-04-26T00:42:05.517 に答える