jQuery Rollover图像

Question

我有一个包含许多图像的页面，我想对它们使用翻转效果，即当观看者将鼠标移到图像上时，图像源会发生变化。我试过这个     Change the image source on rollover using jQuery

但问题是我的图像位于不同的目录中。此外，图像文件名中有多个点。这与网站是用bigcommerce建立的。

有解决方法吗？

Answer 1

您可以使用您给出的示例中的函数，您只需要为两个图像传递正确的图像路径，而不仅仅是更改文件名。

$(function() {
    $("img")
        .mouseover(function() { 
            $(this).attr("src", "fullImageUrl/whateverOver.gif");
        })
        .mouseout(function() {
           $(this).attr("src", "fullImageUrl/whatever.gif");
        });
});

Answer 2

该线程中的解决方案同样适用。只需更改此行中使用的src值

$(this).attr("src", src);

分别表示翻转图片的文件路径和第一和第二实例中的常规图片文件路径的绝对路径。例如，

var src = "../images/rolloverImages/abc.png";

而不是

var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";