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

时间:2011-09-08 19:16:40

标签: jquery image mouseover swap mousedown

我想要实现的目标:

我希望首先在光标位于图像上方(鼠标悬停)时进行图像交换,然后在单击图像时进行图像交换(鼠标单击)。

实施例

我有一张绿色箭头的图像。对于鼠标悬停,它被交换为黄色箭头的图像,并且当点击时交换棕色箭头的图像(但只要保持点击,)。始终会恢复默认的绿色箭头。

<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的解决方案和演示代码发布在下面。

4 个答案:

答案 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元素上绑定hovermousedown,并将src属性更改为正确的图像。

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

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

<强>更新

您不必为hover效果使用jquery,您可以使用css。然后在mousedownmouseup上更改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方法以及mousedownmouseup事件,只需更正地更改图片的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");
});