Question

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

以下是我正在使用的代码

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

Answer 1

您可以使用鼠标事件clientX，clientY https://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>

Answer 2

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

Answer 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%;
    }

Answer 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或类

获取图像特定部分的坐标

4 个答案: