jQuery的图片交换为鼠标悬停和鼠标按下

Question

我想达到什么：

我想当光标在图像上（鼠标）和第二被点击的图像时，首先发生的图像交换（鼠标点击）。

示例：

我有一个绿色箭头的图像。对于鼠标悬停，它会交换为黄色箭头的图像，点击后会交换棕色箭头的图像（但只要点击被保留）。默认的绿色箭头总是被恢复。

<img src="green-default.png" /> 
<img src="yellow-over.png" /> 
<img src="brown-mousedownclick.png" /> 

我已经试过什么：

我申请一个jQuery的图像交换，超过事件鼠标的工作原理：

https://github.com/tszming/jquery-swapimage

例

<script type="text/javascript"> 
jQuery.swapImage(".swapImage"); 
</script> 

<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" /> 

任何建议将是ap reciated。

接受的解决方案

Senad的解决方案（下），造成使用CSS代替的jQuery。链接元素被赋予一个类，它将其设置为被交换图像的维度中的块。这三幅图像作为背景图像应用于链接元素的默认悬停和活动状态。 Senad的解决方案和演示代码如下所示。

Answer 1

我会用CSS去

CSS

a.your_link_button_class { 
    background: url('green-default.png') no-repeat; 
    height: 20px; 
    width: 20px; 
    display: block; 
} 
a.your_link_button_class:HOVER { 
    background: url('yellow-over.png') no-repeat; 
} 
a.your_link_button_class:ACTIVE { 
    background: url('brown-mousedownclick.png') no-repeat; 
} 

HTML

<a class="your_link_button_class" href="#nothing"></a> 

如果你想指针光标，你可以通过CSS添加它

也cursor: pointer;

这将是与类全部链接 “your_link_button_class”

和jQuery来防止链接动作

$(document).ready(function() { $('a.your_link_button_class').click(function() { return false; }); }); 

Answer 2

我会去与你的img元素preloading images using jquery，然后再结合hover和mousedown，改变src属性正确的图像。

我会使用hover，因为它会处理mouseout以及mouseover。

由于我使用mousedown我还会用mouseup来更改img。

UPDATE

您不必使用jquery为hover效果，你可以用CSS做。然后在mousedown和mouseup更改css类以获得所需的效果。

Answer 3

绑定到mouseover/out和mousedown/up并保存状态，因此mouseout-event不会在鼠标按钮仍然关闭时移除棕色图标。然后调用一个函数并查看是否按下鼠标按钮或鼠标悬停在图标上。如果没有，请设置默认图像。

$('#img').mouseover(function() { 
    $(this).data('over',true); 
    updateImage($(this)); 
}).mousedown(function() { 
    $(this).data('down',true); 
    updateImage($(this)); 
}).mouseup(function() { 
    $(this).data('down',false); 
    updateImage($(this)); 
}).mouseout(function() { 
    $(this).data('over'false); 
    updateImage($(this)); 
}); 

function updateImage(elem) { 
    if (elem.data('down')) { 
     elem.attr('src','brown.png'); 
    } else if (elem.data('over')) { 
     elem.attr('src','yellow.png'); 
    } else { 
     elem.attr('src','green.png'); 
    } 
} 

Answer 4

可以使用hover方法，与mousedown和mouseup事件一起，并简单地适当地改变图像的src属性：

$("#yourImageId").hover(function() { 
    $(this).attr("src", "yellow-over.png"); 
}, function() { 
    $(this).attr("src", "green-default.png"); 
}).mousedown(function() { 
    $(this).attr("src", "brown-mousedownclick.png"); 
}).mouseup(function() { 
    $(this).attr("src", "green-default.png"); 
});