JavaScript position / direction calculation

Question

I am trying to figure out how to be able to pipoint specific positions inside a div that is basically a box with a width of 500px and a height of 500px. The positions or rather directions are 'Superior', 'Lateral', 'Medial' and 'Inferior'.

  -----------------------------------
  |          (Superior)             |
  |                                 |
  |                                 |
  | (Lateral)             (Medial)  |
  |                                 |
  |                                 |
  |                                 |
  |           (Inferior)            |
  -----------------------------------

I hope the drawing depicts what I'm trying to pinpoint the positions of. I have two specific questions.

Question 1 is; how can I specify the co-ordinates of the positions inside the box, can I use JavaScript or image maps to do this?

Question 2 is; how do I define the positions, for example where should 'Superior' begin and where should it end? (This may be a maths question, I knew I should have paid more attention in Maths classes!) For example what should the position be if they click somewhere between Medial and Inferior more towards the lower right portion of the div or the lower left portion of the div?

Many thanks

For Question 2, my suggestion is to draw an imaginary X through the box. The center of your X is the center of the box, and the endpoints of the X are the corners of the box. — Dylan, Aug 29 '12 at 20:13

score 1 · Answer 1 · answered Aug 29 '12 at 20:12

1

I'm assuming you split the div in half so you get 2 attributes with each click. I would get the mouse position relative to the position of the div to determine this.

answered Aug 29 '12 at 20:12

Jay

88
3

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

Positions in your div will be defined by X (horizontal) and Y (vertical) coordinates. At the point where your Superior and Lateral lines touch X=0 and Y=0. Likewise, at the point where your Medial and Inferior lines touch X=500 and Y=500.

There are many answers here on stack on how to get coordinates of a mouse click inside an element.

Here is one

edited May 23 '17 at 12:20

Community

1
1

answered Aug 29 '12 at 20:15

brains911

1,310
7
5

JavaScript position / direction calculation

2 Answers2