区域地图不起作用

【问题标题】：Area map not working区域地图不起作用
【发布时间】：2017-06-26 19:31:17
【问题描述】：

我有一个homescreen image，我需要链接到不同的站点，但我仍然无法使我的区域地图工作。我尝试重新排序 and 并仔细检查拼写。我还仔细检查了坐标。想法？

<p><map name="epacbanner"> 
<area shape="rect" coords="0,336,156,489" href="https://www.google.com" 
alt="contact" />
</map> <img src="/content/epac%20banner_final.png" alt="epac banner" 
title="epac banner" width="960" height="322" img="" usemap="#epacbanner" />
</p>

【问题讨论】：

向我们展示您的代码，与普遍的看法相反，这里的用户实际上并不是通灵者 :)
google.com" alt="contact" />
哈哈，对不起。这是一个漫长的星期一。
下一次，将代码放在您的开场白中。这次可能会有版主为你解决这个问题。
请edit 包含minimal reproducible example 的问题。

标签： html imagemap

【解决方案1】：

问题不在于您的 HTML，而在于坐标值，因为您指定了 rect，前两个坐标是形状左上角的 x,y 位置。当您的图像实际上只有322 像素高（高度）时，您已为y 值指定336 将该值更改为0 会在示例图像的左上角放置一个矩形，如第二个所示下面的例子。

<p>
<img src="http://lorempixel.com/960/322" alt="epac banner" 
  title="epac banner" width="960" height="322" usemap="#epacbanner" />
  <map name="epacbanner">
    <area shape="rect" coords="0,336,156,489" href="https://www.google.com" 
  alt="contact" />
  </map>
  
</p>

<p>
<img src="http://lorempixel.com/960/322" alt="epac banner" 
  title="epac banner" width="960" height="322" usemap="#epacbanner" />
  <map name="epacbanner">
    <area shape="rect" coords="0,0,156,489" href="https://www.google.com" 
  alt="contact" />
  </map>
  
</p>

【讨论】：

pokeybit，非常感谢！有效。我非常感谢你的帮助！！！