0

I want to display an alert when the user moves his mouse pointer from coordinate X=42, Y= 10 to the coordinates X=40, Y=200.

However, since these mouse points are very small, the user might not start and end at the exact coordinates. So what i want to do is to give a range where the user could start and end when the mouse is within a certain diameter.

How can i do this ?

enter image description here

Mithun Satheesh
  • 27,240
  • 14
  • 77
  • 101
Illep
  • 16,375
  • 46
  • 171
  • 302
  • I didn't get the scenario completely but sounds 'do'able with particular logical operators. In your case you are talking about going 2 pixels right and 190 pixels down. You may assign global variables and compare them later within the desired range. – Litestone Oct 03 '14 at 10:47
  • Keep tracking window's mouse events and save the possitions needed. – GramThanos Oct 03 '14 at 10:48
  • Just test the distance to the point that you're looking for; and when it's below a certain value then your position is in the center? – Bergi Oct 03 '14 at 10:48
  • There was an answer here a minute ago, i think that was something i was looking for. Please include it again. – Illep Oct 03 '14 at 10:55
  • Have you seen [this](http://stackoverflow.com/questions/481144/equation-for-testing-if-a-point-is-inside-a-circle)? – Litestone Oct 03 '14 at 10:57
  • @Illep I have to edit my answer, because I haven't read your question precisely. Now it should be ok. – Mateusz Rogulski Oct 03 '14 at 11:01

2 Answers2

1

Is it what you're looking for?

$("body").mousemove(function(event) {
    var radius = 10, yourX = 40, yourY = 10;
    var xDimenion = yourX > event.pageX ? yourX - event.pageX : event.pageX - yourX;
    var yDimenion = yourY > event.pageY ? yourY - event.pageY : event.pageY - yourY;
    if(Math.sqrt(xDimenion * xDimenion + yDimenion * yDimenion ) < radius){
        //do some stuff
    }
});

I think it's ok now.

Mateusz Rogulski
  • 7,357
  • 7
  • 44
  • 62
0

Would Client-Side Image Maps work http://www.tutorialspoint.com/html/html_image_links.htm (bottom) using an Image of a Dot and and "area shape" that is set to "circle"; that gives an exact radius (and the option to use poly) for a mouseover.

Rob
  • 1,487
  • 2
  • 25
  • 29