Change the image source on rollover using 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);

        });

});

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



            });

    });

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">

<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">

<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

$('img').bind('mouseenter mouseleave', function() {

    $(this).attr({

        src: $(this).attr('data-other-src') 

        , 'data-other-src': $(this).attr('src') 

    })

});