Javascript 在特定坐标下对图像上的鼠标单击事件作出反应_Javascript_Jquery_Html_Image

Javascript 在特定坐标下对图像上的鼠标单击事件作出反应

javascript jquery html image

Javascript 在特定坐标下对图像上的鼠标单击事件作出反应,javascript,jquery,html,image,Javascript,Jquery,Html,Image,假设我们有一个图像： <img src="path/to/image.jpg"> 现在，我需要一个事件处理程序，当用户在某个坐标（-range）上单击此图像时，该事件处理程序将被激活例如：每当用户单击红色圆圈中的某个位置时，就会触发一个事件。我对每一个想法/提示/解决方案都很满意祝你有愉快的一天以下是使用您提供的图片的示例代码。看看这个 <!DOCTYPE html> <html> <head> </head> <

假设我们有一个图像：

<img src="path/to/image.jpg">

现在，我需要一个事件处理程序，当用户在某个坐标（-range）上单击此图像时，该事件处理程序将被激活

例如：

每当用户单击红色圆圈中的某个位置时，就会触发一个事件。我对每一个想法/提示/解决方案都很满意

祝你有愉快的一天

以下是使用您提供的图片的示例代码。看看这个

<!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>


X:
Y:
var myImg=document.getElementById（“myImgId”）；
myImg.onmousedown=获取坐标；
函数查找位置（oElement）
{
if（typeof（oElement.offsetParent）！=“未定义”）
{
对于（变量posX=0，posY=0；oElement；oElement=oElement.offsetParent）
{
posX+=oElement.offsetLeft；
posY+=oElement.offsetTop；
}
返回[posX，posY]；
}
其他的
{
返回[oElement.x，oElement.y]；
}
}
函数GetCoordinates（e）
{
var-PosX=0；
var-PosY=0；
var-ImgPos；
ImgPos=查找位置（myImg）；
如果（！e）var e=window.event；
如果（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]；
如果（PosX>125&&PosX<143&&PosY>195&&PosY<221）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>16&&PosX<25&&PosY>141&&PosY<152）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>99&&PosX<117&&PosY>40&&PosY<62）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>284&&PosX<301&&PosY>64&&PosY<92）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>264&&PosX<285&&PosY>138&&PosY<167）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>345&&PosX<359&&PosY>203&&PosY<230）{
警报（“你点击了红色圆圈”）；
}
document.getElementById（“x”）.innerHTML=PosX；
document.getElementById（“y”）.innerHTML=PosY；
}

希望这有帮助

以下是使用您提供的图片的示例代码。看看这个

<!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>


X:
Y:
var myImg=document.getElementById（“myImgId”）；
myImg.onmousedown=获取坐标；
函数查找位置（oElement）
{
if（typeof（oElement.offsetParent）！=“未定义”）
{
对于（变量posX=0，posY=0；oElement；oElement=oElement.offsetParent）
{
posX+=oElement.offsetLeft；
posY+=oElement.offsetTop；
}
返回[posX，posY]；
}
其他的
{
返回[oElement.x，oElement.y]；
}
}
函数GetCoordinates（e）
{
var-PosX=0；
var-PosY=0；
var-ImgPos；
ImgPos=查找位置（myImg）；
如果（！e）var e=window.event；
如果（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]；
如果（PosX>125&&PosX<143&&PosY>195&&PosY<221）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>16&&PosX<25&&PosY>141&&PosY<152）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>99&&PosX<117&&PosY>40&&PosY<62）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>284&&PosX<301&&PosY>64&&PosY<92）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>264&&PosX<285&&PosY>138&&PosY<167）{
警报（“你点击了红色圆圈”）；
}否则如果（PosX>345&&PosX<359&&PosY>203&&PosY<230）{
警报（“你点击了红色圆圈”）；
}
document.getElementById（“x”）.innerHTML=PosX；
document.getElementById（“y”）.innerHTML=PosY；
}

希望这有帮助

谢谢大家!！但是，如果移除img宽度/高度，它似乎不起作用。谢谢！但是，如果移除img宽度/高度，它似乎不起作用。。