jQuery Image Swap for mouse-over and mouse-down

Question

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.

Answer 1

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; }); });

Answer 2

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.

Answer 3

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');
    }
}

Answer 4

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");
});