jQuery Image Swap for mouse-over and mouse-down
Pergunta
What I want to achieve:
I want an image swap to occur first when the cursor is over the image (mouse over) and second when the image is clicked (mouse down click).
Example:
I have an image of a green arrow. For the mouse over, it's swapped for an image of a yellow arrow and when clicked swaps an image of a brown arrow (but only so long as the click is held). The default green arrow is always restored.
<img src="green-default.png" />
<img src="yellow-over.png" />
<img src="brown-mousedownclick.png" />
What I've tried:
I've applied a jQuery image swap that works on the mouse over event:
https://github.com/tszming/jquery-swapimage
Example
<script type="text/javascript">
jQuery.swapImage(".swapImage");
</script>
<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" />
Any advice would be apreciated.
Accepted solution
Senad's solution (below) entailed the use of CSS instead of jQuery. A link element is given a class that styles it to be a block in the dimensions of the images being swapped. The three images are applied as background images to the default, hover and active states of the link element. Senad's solution and demonstration code are posted below.
Solução
I would go with 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>
if you want pointer cursor you can add it through CSS also cursor: pointer;
This will be for all links with the class "your_link_button_class"
and in jQuery to prevent link action
$(document).ready(function() { $('a.your_link_button_class').click( function() { return false; }); });
Outras dicas
I would go with preloading images using jquery first and then binding hover
and mousedown
on your img
element and changing the src attribute to the correct image.
I would use hover
since it will handle mouseout
as well as mouseover
.
Since I use mousedown
I would also use mouseup
to change the img back.
UPDATE
You don't have to use jquery for the hover
effect, you could do it with css. Then on mousedown
and mouseup
change the css classes to achieve the desired effects.
Bind to mouseover/out and mousedown/up and save the states, so the mouseout-event won't remove the brown icon while the mousebutton is still down. Then call an function and look, if the mousebutton is pressed or the mouse is over the icon. If none, set default image.
$('#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');
}
}
You can use the hover
method, along with the mousedown
and mouseup
events, and simply change the src
attribute of the image appropriately:
$("#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");
});