使用jQuery在rollover上更改图像源

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

原始图片: Image.gif

翻转图像: Imageover.gif

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

我怎么能用jQuery做到这一点？

1> Jarrod Dixon..：

---

准备就绪:

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

            });
    });

---

我可以建议用.replace("over.gif",".gif")编辑最终的.replace;

---

如果您使用像www.over.com这样的域,或者在URI中的其他位置使用`over`,这也不起作用.

---

如果src是带有的绝对URL,则此方法不起作用.在其中(如www.example.com)

---

图像只有在缓存中时才有效.

---

感谢发布此内容.我希望你不介意我把它放在我的博客上.我的博客就像一个"笔记本",当我忘记某些东西时,它就是我的"最好的东西".

2> Tyson..：

---

我知道你问的是使用jQuery,但是你可以在使用CSS关闭JavaScript的浏览器中实现相同的效果:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

有一个较长的描述在这里

然而,更好的是使用精灵:simple-css-image-rollover

---

除非您正在执行某些效果,否则此解决方案是最优选的选项.我在想同样的事情+1

---

这是最好的解决方案.为避免等待新图像(网络请求),请使用单个image.jpg并使用背景位置来显示/隐藏好图像.

---

@kheraud移动单个图像是一个很好的解决方案,但它是否是最好的取决于图像大小.例如,在慢速互联网上,在一个巨大的文件中下载两个1920px宽的图像将花费不可接受的长时间.对于图标和小图像虽然它工作正常.

3> Richard Ayot..：

---

如果您有多个图像,并且需要一些不依赖于命名约定的通用图像.

HTML

JavaScript的

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

4> jonasl..：

---

    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

---

请记住,这样做意味着用户在浏览器抓取图像时会在第一次悬停时看到暂停.

5> DACrosby..：

---

不限制您使用"此图像"和"该图像"的通用解决方案可能只是将"onmouseover"和"onmouseout"标记添加到HTML代码本身.

HTML

JavaScript的

function swap(newImg){
  this.src = newImg;
}

---

根据您的设置,这样的事情可能会更好(并且需要更少的HTML修改).

HTML

JavaScript/jQuery

// Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }

6> Ionuț Staicu..：

---

$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

您可能想要从第一行更改图像类.如果您需要更多图像类(或不同的路径),您可以使用

$('img.over, #container img, img.anotherOver').each(function(){

等等.

它应该工作,我没有测试它:)

---

+1 Doh,忘记了悬停事件助手!关于在图像中添加类的好建议 - 真的是最佳实践:)

7> chovy..：

---

我希望有一个像这样的超级衬里:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

8> matt..：

---

如果您正在寻找的解决方案是用于动画按钮,那么您可以做的最好的改进性能是精灵和CSS的组合.精灵是一个巨大的图像,包含您网站上的所有图像(标题,徽标,按钮和您拥有的所有装饰).您拥有的每个图像都使用HTTP请求,HTTP请求越多,加载所需的时间就越多.

.buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

该0px 0px坐标将是你的精灵左上角.

但是,如果您正在使用Ajax或类似的东西开发一些相册,那么JavaScript(或任何框架)是最好的.

玩得开心!