jQuery/BigCommerce How to Replace Image with Image from Different Directory

Question

HHi,

I'm building a site with BigCommerce, and I'm trying to have rollover effect for product thumbnails on category page. I have this code below, but the new image path is just addded to the current image path, like this

http://cdn2http//cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/82/images/345/cmpltunknwn_beetlered_view003__84669.1394213367.1000.1200.jpg.

So I think I need to redefine the image path, but I'm not sure how to do it.

The code:

$(function() {
$("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/82/images/345/cmpltunknwn_beetlered_view003__84669.1394213367.1000.1200.jpg";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over.gif", ".gif");
        $(this).attr("src", src);
    });
});

Answer 1

This worked for me:

$(".ProductList li:first-child img")
    .mouseover(function() { 
        $(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/460/cmpltunknwn_wolfgold_view003__18141.1396558339.1280.1280.jpg?c=1");
        })
    .mouseout(function() {
       $(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/461/cmpltunknwn_wolfgold_view001__55714.1396558344.330.330.jpg?c=1");
    });