使用jQuery更改翻转时的图像源

Question

使用jQuery更改翻转时的图像源我有一些图片和他们的滚动图像。使用jQuery，当onmousemove/onmouseout事件发生时，我希望显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式，如下所示：原始图像：Image.gif滚动图片：Imageover.gif我想插入并删除“完毕”在onmouseover和onmouseout事件中图像源的部分。我如何使用jQuery来完成它呢？

Answer 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);

            });
    });

Answer 2

我知道您在询问如何使用jQuery，但在JavaScript关闭使用CSS的浏览器中，您可以获得相同的效果：

#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);}

有一个更长的描述这里

然而，更好的做法是使用精灵：简单-css-图像翻转

Answer 3

如果您有多个图像，并且需要一些通用的、不依赖于命名约定的东西。

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg"><img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

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