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.

+1 for greatly structured question. @Senad: Hover is easy (:hover) but how would you do the mousedown? — Wulf, Sep 08 '11 at 19:25
@Senad: I didn't realize that the active state of a link was the "click/down" state. — Dominor Novus, Sep 09 '11 at 01:17

Senad Meškin · Accepted Answer · 2011-09-08T19:39:07.763

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

Ali · Answer 2 · 2011-09-08T19:27:36.087

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.

edited Sep 08 '11 at 19:27

answered Sep 08 '11 at 19:22

Ali

12,354
9
54
83

I was able to use Senad's CSS solution for both events. With regards to the image preloading via jQuery, is it not sufficient to load the images in a div element that’s set to display:none? – Dominor Novus Sep 09 '11 at 00:58
You could do that. The problem is that you are putting images in the dom which are there for no reason. If someone accesses the page with css disabled it will be confusing to them. Do remember that your site should be fully functional (ideally) with javascript and css disabled. – Ali Sep 09 '11 at 07:24
Thanks for the advice. It makes sense. A block of random images at the end of the page would indeed confuse the user. – Dominor Novus Sep 10 '11 at 10:33

score 1 · Answer 3 · answered Sep 08 '11 at 19:22

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

Hey, Wulf. I've opted for the CSS approach because it requires less coding. — Dominor Novus, Sep 09 '11 at 01:01

score 1 · Answer 4 · answered Sep 08 '11 at 19:24

1

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

answered Sep 08 '11 at 19:24

James Allardice

164,175
21
332
312

Thanks for example code but the CSS approach provided by Senad seems to require less code. In this particular case, is there any advantage to using jQuery over CSS? – Dominor Novus Sep 09 '11 at 01:00

jQuery Image Swap for mouse-over and mouse-down

What I want to achieve:

Example:

What I've tried:

Accepted solution

4 Answers4