[英]React to mouse-click event on image at certain coordinates
let's assume we have an image: 假设我们有一张图片:
<img src="path/to/image.jpg">
Now I need an event handler which is activated when the user clicks on this image on a certain coordinate(-range). 现在,我需要一个事件处理程序,当用户在某个坐标(范围)上单击此图像时,该事件处理程序将被激活。
Whenever the user clicks somewhere in the red circle, an event should be fired. 每当用户单击红色圆圈中的某个位置时,都应触发一个事件。 I'm happy about every idea / hint / solution.
我对每个想法/提示/解决方案感到满意。
Have a good day! 祝你有美好的一天!
Here is the sample code using picture you provided. 这是使用您提供的图片的示例代码。 Check this.
检查一下。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="image.jpg" width="400" height="300" alt="" id="myImgId" />
<p>X:<span id="x"></span></p>
<p>Y:<span id="y"></span></p>
<script type="text/javascript">
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
function FindPosition(oElement)
{
if(typeof( oElement.offsetParent ) != "undefined")
{
for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
}
else
{
return [ oElement.x, oElement.y ];
}
}
function GetCoordinates(e)
{
var PosX = 0;
var PosY = 0;
var ImgPos;
ImgPos = FindPosition(myImg);
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PosX = e.pageX;
PosY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PosX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
PosY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
PosX = PosX - ImgPos[0];
PosY = PosY - ImgPos[1];
if(PosX > 125 && PosX < 143 && PosY > 195 && PosY < 221) {
alert("You clicked on the red circle");
} else if(PosX > 16 && PosX < 25 && PosY > 141 && PosY < 152) {
alert("You clicked on the red circle");
} else if(PosX > 99 && PosX < 117 && PosY > 40 && PosY < 62) {
alert("You clicked on the red circle");
} else if(PosX > 284 && PosX < 301 && PosY > 64 && PosY < 92) {
alert("You clicked on the red circle");
} else if(PosX > 264 && PosX < 285 && PosY > 138 && PosY < 167) {
alert("You clicked on the red circle");
} else if(PosX > 345 && PosX < 359 && PosY > 203 && PosY < 230) {
alert("You clicked on the red circle");
}
document.getElementById("x").innerHTML = PosX;
document.getElementById("y").innerHTML = PosY;
}
</script>
</body>
Hope this helps ! 希望这可以帮助 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.