如何使我的区域映射链接正常工作

Question

我正在尝试创建一个区域映射以在全屏幕图片中进行单击中的电子邮件地址，原因是该设计是由另一个设计师提供的，并且客户端已询问我不重新创建html中的所有divs(不是我想要的(。

我已经使用https://www.image-map.net/来生成区域映射的坐标，这是我在将其添加到网页之前要测试的JSFIDDLE：p> 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:[e-mail]" coords="581,722,793,745" shape="rect">
    <area target="_blank" alt="Email 2" title="Email 2" href="mailto:[e-mail]" coords="859,721,1006,743" shape="rect">
    <area target="_blank" alt="Email 3" title="Email 3" href="mailto:[e-mail]" 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:[e-mail]" coords="211,192,50,47" shape="rect">
    <area target="_blank" alt="" title="" href="mailto:[e-mail]" coords="806,267,674,139" shape="rect">
    <area target="_blank" alt="" title="" href="mailto:[e-mail]" coords="118,461,258,592" shape="rect">
</map>