我希望首先在光标位于图像上方(鼠标悬停)时进行图像交换,然后在单击图像时进行图像交换(鼠标单击)。
我有一张绿色箭头的图像。对于鼠标悬停,它被交换为黄色箭头的图像,并且当点击时交换棕色箭头的图像(但只要保持点击,)。始终会恢复默认的绿色箭头。
<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的解决方案和演示代码发布在下面。
答案 0 :(得分:4)
我会选择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; }); });
答案 1 :(得分:2)
我首先使用preloading images using jquery,然后在img
元素上绑定hover
和mousedown
,并将src属性更改为正确的图像。
我会使用hover
,因为它会处理mouseout
以及mouseover
。
由于我使用mousedown
,我还会使用mouseup
来更改img。
<强>更新强>
您不必为hover
效果使用jquery,您可以使用css。然后在mousedown
和mouseup
上更改css类以获得所需的效果。
答案 2 :(得分:1)
绑定到鼠标悬停/输出和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');
}
}
答案 3 :(得分:1)
您可以使用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");
});