CODEWITHSUNDEEP
htmlcoordinate
Raph Schim
Raph Schim

Reputation: 538

Coordinate of clicked point on image HTML

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!

Upvotes: 2

Views: 200

Answers (2)

user5680735
user5680735

Reputation: 713

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);
});

Upvotes: 1

Mand
Mand

Reputation: 509

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;
});

Upvotes: 0

Related Questions