एक छवि पर क्लिक करें, निर्देशांक प्राप्त करें

Question

मुझे पता है कि यह किया जा सकता है और मुझे यह भी एक अस्पष्ट विचार है कि इसे कैसे किया जाए लेकिन यह अस्पष्ट होने पर रोकता है।

मेरे पास एक छवि के साथ मानक HTML छवि टैग है, 100 आकार में 100 पिक्सल आकार में। मैं चाहता हूं कि लोग छवि पर क्लिक करने में सक्षम हों और इसके लिए एक्स और वाई पास करें कि वे एक फ़ंक्शन में क्लिक करें।

निर्देशांक को छवि के शीर्ष और बाएं से संबंधित होने की आवश्यकता है।

किसी भी मदद के लिए अग्रिम धन्यवाद।

Answer 1

मुझे लगता है कि आप के बारे में बात कर रहे हैं:

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

जब प्रस्तुत की, वहाँ एक्स के लिए प्रपत्र मान हैं और y इनपुट तत्व आईडी (info.x और info.y इस मामले में) के आधार पर निर्देशांक।

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

Answer 2

आप क्या वर्णन आप, छवि माउस घटना के लिए पंजीकरण करना इस मामले के लिए आप छवि माउस बटन घटना होना चाहिए से

।

समारोह में

आप

Point mousePoint = e.GetPosition(this); 

कि आप ऊपरी बाएँ बिंदु पूर्णांक पिक्सल के अनुसार माउस स्थिति दे देंगे का उपयोग करना चाहिए।

mousePoint से आप एक्स और वाई जानकारी प्रिंट कर सकते हैं।

Answer 3

अपनी छवि के साथ कैनवास बदलें और यह एक ही

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>