如何在图像中准确获取点的位置,而不会在其他设备中更改

How to get exactly position of the point in the image and not change in the other device

本文关键字:其他 图像 获取 位置      更新时间:2023-09-26

我这里有一个图像地图而不是谷歌地图,我的图像地图

如何解开此图像中红点的位置,然后我编写代码 jquery 以将鼠标悬停在此点上并显示弹出消息。在电脑上还可以,但是当我更改为在移动设备中查看时,它也改变了点的位置。请让我知道如何准确设置红点的位置,并且不会在手机或平板电脑中改变位置。这是我的代码jquery,用于获取点的位置

 $(document).ready(function() {
   $("#test").click(function(e) {
     var offset = $(this).offset();
     var relativeX = (e.pageX - offset.left);
     var relativeY = (e.pageY - offset.top);
     alert('X: ' + relativeX + ', Y: ' + relativeY);
     $(".position").val("afaf");
   });
 });

使用 jquery,我们可以使将鼠标悬停在某个元素上时,会出现一个曾经不可见的元素,一旦鼠标移开,它就会消失。下面的代码应该会把你带到正确的方向。

https://jsfiddle.net/07q6pLfj/1/

<div>
    <p>This is an element which does not change when you hover over it.</p>
        <div class="hover"><div class="popup">
        This is text which pops up when you hover
    </div>
        When you hover over this a popup shows.
</div>
.popup {
    display:none;
    position:absolute;
        background-color: red;
    width:400px;
    height:400px;
        margin-top: 30px;
}

$(".hover").mouseover(function() {
    $(this).children(".popup").show();
}).mouseout(function() {
    $(this).children(".popup").hide();
});