Mousemove vs mouseover vs something else

Question

I need to associate a mouse event area with an image

just think of the facebook tag for a second when you roll your face: it shows you the name, right?

Well, I did very similar, but with maps and city names, ok, here we go:

$('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, etc.), but only when the mouse moves to the area, so if you go to the area and leave the mouse there (since it does not move), it will disappear.

And if I use .bind ('mouseover'), this will not work, because when you move the image to all its edges,

What are you offering?

Answer 1

You can combine mouseover or mouseenter and mousemove objects

http://api.jquery.com/mousemove/

http://api.jquery.com/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 } 

Answer 2

on mouseover setInterval with a function that will check the position of the mouse every second, and when outputting the mouse clear this interval

If you are using jQuery,. hover () provides both mouse and mouseout