使用jQuery更改图片来源

小编典典

使用jQuery更改图片来源

html

我有一些图像及其翻转图像。使用jQuery，我想在onmousemove /
onmouseout事件发生时显示/隐藏过渡图像。我所有的图像名称都遵循相同的模式，如下所示：

原始图片： Image.gif

展期图片： Imageover.gif

我想分别在onmouseover和onmouseout事件中插入和删除图像源的 “结束” 部分。

如何使用jQuery？

阅读 513

2020-05-10

共1个答案

小编典典

要准备就绪，请执行以下操作：

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

            });
    });

2020-05-10