[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する

質問

いくつかの画像とそのロールオーバー画像を持っています。jQueryを使って、onmousemove/onmouseoutイベントが発生したときにロールオーバー画像を表示/非表示にしたいのですが、どうすればよいでしょうか？私のイメージの名前はすべて同じパターンで、次のようなものです。

元の画像 Image.gif

ロールオーバー画像。 Imageover.gif

を挿入・削除したい。 "オーバー"。 の部分を、それぞれonmouseoverイベントとonmouseoutイベントで表示します。

jQueryを使用して行うにはどうしたらよいですか？

どのように解決するのですか？

準備完了で設定する。

$(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);

            });
    });