Nhấp vào hình ảnh, nhận tọa độ

Question

Tôi biết điều đó có thể được thực hiện và tôi thậm chí còn có ý tưởng mơ hồ về cách thực hiện nhưng nó dừng lại ở mức mơ hồ.

Tôi có thẻ hình ảnh HTML chuẩn với hình ảnh trong đó, kích thước 100 x 100 pixel. Tôi muốn mọi người có thể nhấp vào hình ảnh và để vượt qua X và Y mà họ nhấp vào một chức năng.

Tọa độ cần phải liên quan đến hình ảnh trên cùng và bên trái.

Cảm ơn bạn trước vì đã được trợ giúp.

Answer 1

Tôi nghĩ rằng bạn đang nói về:

<input id="info" type="image"> 

Khi nộp, có giá trị dưới hình thức cho x và y tọa độ dựa trên id yếu tố đầu vào (info.x và info.y trong trường hợp này).

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1

Answer 2

từ những gì bạn mô tả, bạn nên đăng ký cho sự kiện hình ảnh chuột, đối với trường hợp này, bạn nên có sự kiện nút chuột hình ảnh.

tại chức năng bạn nên sử dụng

Point mousePoint = e.GetPosition(this); 

rằng sẽ cung cấp cho bạn vị trí chuột theo quan điểm trái int pixels hàng đầu.

so với số mousePoint bạn có thể in thông tin X và Y.

Answer 3

Thay vải với hình ảnh của bạn và nó sẽ làm việc cùng

let img = document.getElementById("canvas"); 
 

 
img.x = img.getBoundingClientRect().left; 
 
img.y = img.getBoundingClientRect().top; 
 

 
function click(e) { 
 
    document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "<br> Y coords: " + (e.clientY - img.y); 
 
} 
 

 
img.addEventListener("click", click);

<!--- Like a image ---> 
 
<canvas id="canvas" width="100" height="100"></canvas> 
 
<p id="output"></p>