Реагировать на событие щелчка мышью на изображении в определенных координатах - PullRequest
Новая
       3

Реагировать на событие щелчка мышью на изображении в определенных координатах

0 голосов
/ 01 сентября 2018

давайте предположим, что у нас есть изображение: 

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

Теперь мне нужен обработчик событий, который активируется, когда пользователь нажимает на это изображение по определенной координате (-range).

Пример: enter image description here

Всякий раз, когда пользователь щелкает где-то в красном круге, событие должно быть запущено. Я доволен каждой идеей / подсказкой / решением.

Хорошего дня!

1 Ответ

0 голосов
/ 01 сентября 2018

Вот пример кода с использованием предоставленной вами картинки. Проверьте это. 

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

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...