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

Answer 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