我想要实现的目标：

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'}" />

任何建议都会被贬低。

接受的解决方案

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;

添加它

这将适用于班级的所有链接＆＃34; your_link_button_class＆＃34;

并在jQuery中阻止链接操作

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

Answer 2

我首先使用preloading images using jquery，然后在img元素上绑定hover和mousedown，并将src属性更改为正确的图像。

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

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

<强>更新

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

Answer 3

绑定到鼠标悬停/输出和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");
});

鼠标悬停和鼠标按下的jQuery Image Swap

我想要实现的目标：

实施例

我尝试了什么：

接受的解决方案

4 个答案: