获取图像特定部分的坐标答案

【问题标题】：Get coordinates of a particular section of the image获取图像特定部分的坐标
【发布时间】：2017-08-25 20:58:43
【问题描述】：

我想在此图像中添加一个文本并链接到此处的两个标志板（分别用于两个标志板）。我正在尝试使用<map> <area> 规则，我需要将两个矩形框的坐标放在那里，这样一旦用户单击该板或文本，他就会被重定向到另一个页面。现在的问题是我不确定从哪里可以找到图像的确切坐标以及如何找到？如果有人可以提供帮助，请提供帮助。

这是我正在使用的代码

<img src="image link here" usemap="#mapname">
    <map name="mapname">
      <area shape="rect" coords="" href="http://www.google.com" alt="TEST">
    </map>

【问题讨论】：

您可以使用这样的工具来建立图像地图的坐标image-maps.com

标签： php jquery css html

【解决方案1】：

可以使用鼠标事件clientX,clientYhttps://www.w3schools.com/jsref/event_clientx.asp

当你使用 onmousemove 时，它会显示坐标

<!DOCTYPE html>
<html>
<body>

<img src="https://i.stack.imgur.com/mDEuy.jpg" usemap="#mapname" 
    onmousemove="showCoords(event)">
    <map name="mapname">
      <area shape="rect" coords="" href="http://www.google.com" alt="TEST">
    </map>
</img>


<p id="demo"></p>

<script>
    function showCoords(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coords = "X coords: " + x + ", Y coords: " + y;
        document.getElementById("demo").innerHTML = coords;
    }
</script>

</body>
</html>

【讨论】：

【解决方案2】：

我使用了一个名为 Page Ruler 的 chrome 扩展程序。我所做的是使用扩展从坐标为 0,0 的像素到目标像素绘制一个矩形。顶部的栏显示矩形的宽度和高度。还有其他工具，例如 Meazure，可以做同样的事情。

【讨论】：

【解决方案3】：

我正在做类似的事情，但我想让它具有响应性 - 如果你放大，图像会更大，区域也会更大。我没有使用<map>，因为坐标是绝对的。我用这个：

<div id="mapdiv">
  <img src="link" id="imgmap" alt="" />
    <a href="target"><div id="box1">Here is the text</div></a>
    <div id="box2" onclick="alert('You can use js too')"></div>
</div>

还有 CSS：

#imgmap {
    width: 100%;
    }
div#mapdiv {
    position: relative; /* thanks to this... */
    }
div#menu div {
    position: absolute; /* ...and this are boxes positioned relatively inside the imgdiv */
    border: 1px dashed blue; /* for finding coords, remove after you are done */
}
div#box1 {
    left: 21%; /* my coords, make your own by trying and trying... */
    top: 26.5%;
    height: 5%;
    width: 6.5%
    }
div#box2 {
    left: 7.5%;
    top: 66.2%;
    height: 24.5%;
    width: 31.5%;
    }

【讨论】：

【解决方案4】：

如果你想添加文本，那么你最好使用真正的链接并将它们设置在你的区域顶部，这些区域是安静的好矩形。

示例：

.map {
  position: relative;
}

.map img {
  display: block;
  width: 100%;
}

.map a {
  position: absolute;
  top: 48.6%;
  left: 9.118%;
  width: 19.8%;
  height: 19%;
  transform: rotate(-1.375deg);
  border-radius: 50% 50% 0px 0 / 0.25vw;
  transition: 0.5s;
  color:#3F4754;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4vw;
  font-weight:bold;
  font-family:courier;
  font-variant:small-caps;
  text-decoration:none;
  text-shadow:-2px -2px 2px black
}

.map a + a {
  top: 48%;
  left: 70%;
  transform: rotate(3deg);
  transform-origin: bottom right
}

a:hover {
  color: white;
  background:linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), transparent);
  text-shadow:2px 2px 2px black
}

<div class="map">
  <img src="https://i.stack.imgur.com/mDEuy.jpg" />
  <a href="#1">hover me</a>
  <a href="#2">or me</a>
</div>

使用你自己的风格和ID或类

【讨论】：

【解决方案5】：

$(document).ready(function() {
  $("img").on("click", function(e) {
    bounds=this.getBoundingClientRect();
    var l = bounds.left;
    var t = bounds.top;
    var x = e.pageX - l;
    var y = e.pageY - t;
    var cw = this.clientWidth;
    var ch = this.clientHeight;
    var nw = this.naturalWidth;
    var nh = this.naturalHeight;
    var px = x/cw*iw;
    var py = y/ch*ih;        
  });
});

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。