2

I'm only using JS and HTML, and I would like to know if there is a method to get the coordinates of the point I'm actually clicking on an image. I would like to have the same coordinates that you give when you use the <area shape="circle" coords="...,...,..." for example.

I already tried to use pageX, pageY, offsetX, ... but nothing of this works my way ... :/

The context is that I have an image that is bigger than the div that contain it. I want to be able to drag the image. And I have another little image that is the same as the big image (resized to be a miniature) and a red rectangle on it so when I move on the big image, I can know where I am if i check the rectangle on the miniature!

Thanks in advance for your responses!

Raph Schim
  • 528
  • 7
  • 30
  • I'm not sure you need to find out exactly where you clicked for either of your problems: For moving the image around you only need to know THAT you clicked and how your mouse moved during dragging. And for your "overview" image you only need to know the position of your big image inside the div. I hope what I'm saying makes any sense. – mmgross Mar 07 '16 at 09:23
  • That's an other idea that didn't came up in my mind. That make sense, yup, but I'm not this is easier? – Raph Schim Mar 07 '16 at 09:25
  • I don't know. I'm not that well versed in pure JS and right now I have no time to figure it out. Anyway, think about that: It might be easier to find out the exact position of your click, but how would that help you achieving your desired result? – mmgross Mar 07 '16 at 09:27
  • I just checked it out after seeing your first post ahah. That's true that it can't be the exact solution. I was thinking about modifying the red rectangle after my mouse is release, but in no world it can be exact, cause the mouse isn't always on the middle of my screen! I will find a method using your solution! Thanks a lot ;) – Raph Schim Mar 07 '16 at 09:30

2 Answers2

1

Probably not through html but I know through JS/jQuery

$(document).on("mouseover", function(event) {
    console.log("x coord: " + event.clientX);
    console.log("y coord: " + event.clientY);
});
user5680735
  • 703
  • 2
  • 7
  • 21
0

Yes there is.

Take a look at this thread. It already has an answer for you!

jQuery get mouse position within an element

Answer by 'Jball'.

One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example for future reference:

$("#something").click(function(e){
var parentOffset = $(this).parent().offset(); 
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
Community
  • 1
  • 1
Mand
  • 499
  • 1
  • 5
  • 25
  • I'm actually not using JQuery ;) only native JS :/ – Raph Schim Mar 07 '16 at 09:19
  • I already checked this, but it doesn't works and always give me back the value 0 :'( (I came here after sawing that this solution wasn't helping me :'( ) – Raph Schim Mar 07 '16 at 09:21
  • You're trying too hard. If you don't know the answer to a problem, don't try to answer it by changing the problem just so you can get upvotes and an accepted answer. Additionally: IF your answer was the correct answer, it should have been only a comment (or technically even a flag) on the question. – mmgross Mar 07 '16 at 09:25