CODEWITHSUNDEEP
javascriptcssimagemap
Imran Azad
Imran Azad

Reputation: 1404

JavaScript position / direction calculation

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

Upvotes: 0

Views: 247

Answers (2)

brains911
brains911

Reputation: 1310

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

Upvotes: 1

Jay
Jay

Reputation: 88

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.

Upvotes: 1

Related Questions