Do something in hover if the right button of the mouse is down (pressed)

Question

I need to zoom an image when mouse is over the image and the right button of the mouse is kept pressed. something like:

$('img').hover(
     function(){
       if (the-right-mouse-button-is-pressed){
         $(this).animate({
         width:  $(this).width() *2,
         height: $(this).height()*2,
         }, 500);
       }
     },
});

I need help. Thanks.

A lil' bit of search.... http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery, http://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click, http://stackoverflow.com/questions/4007482/jquery-detect-if-middle-or-right-mouse-button-is-clicked-if-so-do-this — elclanrs, Apr 10 '12 at 19:57
I saw that. It is different from my question. Thanks by the way. — Bahar S, Apr 12 '12 at 02:43

Selvakumar Arumugam · Answer 1 · 2012-04-12T21:15:45.410

Edit: For your below comment,

Thanks. However, it requires a right-click on the picture. it does not work if you keep the right button down somewhere else in the screen and then pass the image

You need to add mouseup event and zoom conditionally. See below code, DEMO

var hasExpanded = false;
$('img').on('mousedown mouseup', function(e) {
    if (e.which == 3) {
            if (!hasExpanded) {
            $(this).animate({
                width: $(this).width() * 2,
                height: $(this).height() * 2,
            }, 500);
        }
        hasExpanded = true;
    }
}).mouseleave(function(e) {
    if (hasExpanded  == true) {
    $(this).animate({
        width: $(this).width() / 2,
        height: $(this).height() / 2,
    }, 500);
    hasExpanded = false;
}
});

What you need cannot be achieved through hover. Hover will be triggered on mouseeneter which will be called only once and It cannot record the mousedown event which happens at later point.

You need to implement mousedown handler. See below,

DEMO - Demo has both mousedown and mouseleave implemented.

$('img').mousedown(function(e) {
    if (e.which == 3) {
        $(this).animate({
            width: $(this).width() * 2,
            height: $(this).height() * 2,
        }, 500);
    }
});

Thanks. However, it requires a right-click on the picture. it does not work if you keep the right button down somewhere else in the screen and then pass the image. — Bahar S, Apr 11 '12 at 01:35
@BaharS Updated code handling the mouseup case on the image. [**DEMO**](http://jsfiddle.net/PhM8P/3/). — Selvakumar Arumugam, Apr 12 '12 at 21:16

Do something in hover if the right button of the mouse is down (pressed)

1 Answers1