jQueryによるロールオーバー時の画像ソースの変更

いくつかの画像とそのロールオーバー画像があります。jQueryを使って、onmousemove/onmouseoutイベントが発生したときに、ロールオーバー画像を表示/非表示にしたいと考えています。画像の名前はすべて同じパターンで、次のようになっています。

オリジナル画像。Image.gif

ロールオーバー画像: Image.gif:イメージオーバー.gif

onmouseoverとonmouseoutイベントで、イメージソースの"over"部分をそれぞれ挿入、削除したいのですが、どうすればいいでしょうか？

jQueryを使ってどのようにすればよいのでしょうか？

lowtechsun
編集された質問 18日 4月 2016 в 10:12
プログラミング
html jquery
12日 2月 2009 в 7:28
16 ビュー
ソリューション

準備ができている状態に設定すること。

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

urlの画像ソースを使用している方へ

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });
jemmamariex3
編集した答え 4日 1月 2019 в 4:41
解説 (10)

jQueryを使いたいとのことですが、JavaScriptをオフにしたブラウザでもCSSを使えば同じ効果が得られます。

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

もっと詳しい説明はこちらをご覧ください。

しかし、さらに良いのは、スプライトを使うことです。simple-css-image-rollover。

ankit suthar
編集した答え 8日 9月 2017 в 11:24
解説 (6)
 
$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

画像のクラスを最初の行から変更したい場合があります。もっと多くの画像クラスが必要な場合（あるいは別のパスが必要な場合）、次のようにします。

$('img.over, #container img, img.anotherOver').each(function(){

などとします。

動作するはずですが、テストはしていません :)

pawelmech
編集した答え 15日 3月 2011 в 2:40
解説 (3)