如何在一個文本字段中獲取圖像映射的x座標和y座標？

我使用一個簡單的JavaScript來產生X軸和圖像映射的y座標：如何在一個文本字段中獲取圖像映射的x座標和y座標？

<script language="JavaScript"> 
       function point_it(event){ 
       pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; 
       pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; 
       document.pointform.form_x.value = pos_x; 
       document.pointform.form_y.value = pos_y; 
       } 
     </script>

隨着「form_x」和「form_y」在體內具有不同的文本字段。但是，我想都輸出（pos_x，pos_y）在一個文本字段。用分號分隔。這可能是&任何人都可以幫忙嗎？

非常感謝您的意見。

喬爾

來源

2011-03-22 Jouel

試試這個，假設你的新的格式文本字段form_xy命名爲：

document.pointform.form_xy.value = pos_x + ',' + pos_y;

來源

2011-03-22 22:37:33

<html> 
<head> 
<script language="JavaScript"> 
function point_it(event){ 
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; 
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; 

document.pointform.form_x.value = pos_x; 
document.pointform.form_y.value = pos_y; 

} 
</script> 
</head> 
<body> 
<form name="pointform" method="post"> 
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('image.jpg');width:500px;height:333px;"> 

</div> 
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" /> 
</form> 
</body> 
</html>

來源

2016-06-01 09:35:58

如何在一個文本字段中獲取圖像映射的x座標和y座標？

回答

相關問題