I need to bind a mouse event to an area of an image.

Just think of the Facebook picture tag for a second, when you hover the face, it shows you the name.

I made a very similar thing but with maps and city names, like this:

$('img#mapaMundi').bind('mousemove', function(e) {
    x = getX();
    y = getY();
    var found = find(x, y);

    if (found == undefined) {
        console.log('There is no tagged city for this position');
    } else {
        show(found);
    }
});

And this works great, it shows the desired tag (with animation and stuff) but only while mouse is moved in the area, so if you move to the area and leave the mouse there (as it's not moving) it will dissapear.

If I use .bind('mouseover') it won't work because when you hover the image it's always in one of the edges.

What would you suggest?

I need to bind a mouse event to an area of an image.

Just think of the Facebook picture tag for a second, when you hover the face, it shows you the name.

I made a very similar thing but with maps and city names, like this:

$('img#mapaMundi').bind('mousemove', function(e) {
    x = getX();
    y = getY();
    var found = find(x, y);

    if (found == undefined) {
        console.log('There is no tagged city for this position');
    } else {
        show(found);
    }
});

And this works great, it shows the desired tag (with animation and stuff) but only while mouse is moved in the area, so if you move to the area and leave the mouse there (as it's not moving) it will dissapear.

If I use .bind('mouseover') it won't work because when you hover the image it's always in one of the edges.

What would you suggest?

• javascript
• jquery
• events

2 Answers 2

You can bine maybe mouseover or mouseenter and mousemove

http://api.jquery./mousemove/

http://api.jquery./mouseenter/

So when mouseenter -> mousemove

mouseleave -> do nothing?

var int = null;
$('#element').hover(function() {
int = setInterval(someFunc, 100);
}, function() {
clearInterval(int);
});

function someFunc() {
DO YOUR MOUSEMOVE THINGS
}

on mouseover setInterval with a function that will check mouse position each second, and on mouseout clear that interval

If you use jQuery, .hover() provides both mouseover and mouseout