jquery - 使用jQuery更改图片来源(Change the image source on rollover using jQuery)

Question

I have a few images and their rollover images.

(我有一些图像及其翻转图像。)

Using jQuery, I want to show/hide the rollover image when the onmousemove/onmouseout event happen.

(我想使用jQuery在onmousemove / onmouseout事件发生时显示/隐藏过渡图像。)

All my image names follow the same pattern, like this:

(我所有的图像名称都遵循相同的模式，如下所示：)

Original Image: Image.gif

(原始图片： Image.gif)

Rollover Image: Imageover.gif

(展期图片： Imageover.gif)

I want to insert and remove the "over" portion of image source in the onmouseover and onmouseout event, respectively.

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

How can I do it using jQuery?

(我该如何使用jQuery？)

  ask by Sachin Gaur translate from so

Answer 1

To set up on ready:

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

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

For those that use url image sources:

(对于使用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);

            });
    });