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?
Share Improve this question edited Mar 6, 2019 at 11:03 Antti29 3,03112 gold badges36 silver badges36 bronze badges asked Nov 25, 2011 at 12:02 Toni Michel CaubetToni Michel Caubet 20.2k58 gold badges217 silver badges388 bronze badges 02 Answers
Reset to default 3You 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