Question

我正在尝试创建一个区域地图，以使全屏图片中的电子邮件地址可点击，原因是该设计由另一位设计师提供，并且客户要求我不要重新创建所有HTML中的div（不是我想要的）。

我已经使用https://www.image-map.net/来生成区域地图的坐标，这是在将其添加到网页之前要测试的jsfiddle：

https://jsfiddle.net/vanstone/xL86wkfv/6/

HTML：

<img src="https://i.postimg.cc/3rLpPtjB/Email-Panel-Example.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Email 1" title="Email 1" href="mailto:e1@email.com" coords="581,722,793,745" shape="rect">
    <area target="_blank" alt="Email 2" title="Email 2" href="mailto:e2@email.com" coords="859,721,1006,743" shape="rect">
    <area target="_blank" alt="Email 3" title="Email 3" href="mailto:e3@email.com" coords="583,891,782,914" shape="rect">
</map>

我期望区域图至少显示在图像上的某个位置，但是我无法在图像上的任何位置找到任何可单击的链接。对于这里出了什么问题的任何想法，将不胜感激。

Answer 1

您的map坐标在img维度之外。您所在区域的坐标从高数字开始，但是img小得多。

在执行类似的地图区域时，应准确指定img的尺寸。我在下面使用您的img显示了一种可能的解决方案：

img {
  display: block;
  width: 1280px;
  height: 720px;
}

<img src="https://i.postimg.cc/3rLpPtjB/Email-Panel-Example.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="" title="" href="mailto:censored1@example.com" coords="211,192,50,47" shape="rect">
    <area target="_blank" alt="" title="" href="mailto:censored2@example.com" coords="806,267,674,139" shape="rect">
    <area target="_blank" alt="" title="" href="mailto:censored3@example.com" coords="118,461,258,592" shape="rect">
</map>

如何使我的区域地图链接正常工作？

1 个答案: