使用 jQuery 在翻转时更改图像源 [英] Change the image source on rollover using jQuery

问题描述

我有一些图像和它们的翻转图像.使用 jQuery，我想在 onmousemove/onmouseout 事件发生时显示/隐藏翻转图像.我所有的图像名称都遵循相同的模式，如下所示:

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. All my image names follow the same pattern, like this:

原始图片:Image.gif

翻转图像:Imageover.gif

我想分别在 onmouseover 和 onmouseout 事件中插入和删除图像源的over"部分.

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

如何使用 jQuery 来实现?

How can I do it 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);
        });
});

对于那些使用 url 图片源的人:

For those that use url image sources:

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

            });
    });

这篇关于使用 jQuery 在翻转时更改图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！