Question

假设我们有一张图片：

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

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

示例：

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

祝你有美好的一天！

Answer 1

这是使用您提供的图片的示例代码。检查一下。

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

希望这会有所帮助！

在特定坐标处对图像上的鼠标单击事件做出反应

1 个答案: