如何让我的区域地图链接正常工作？答案

【问题标题】：How do I get my area map links to work correctly?如何让我的区域地图链接正常工作？
【发布时间】：2019-12-06 09:35:29
【问题描述】：

我正在尝试创建一个区域图以使全屏图片中的电子邮件地址可点击，原因是该设计已由另一位设计师提供，并且客户要求我不要重新创建所有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>

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

【问题讨论】：

标签： html image dictionary area

【解决方案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>

【讨论】：