HTML map 和区域未显示

Question

我一直在尝试将 map 放在图片上以使其可点击，但是该区域不起作用。当我使用 chrome 开发人员工具检查页面时，它显示为 0x0 区域。这是代码。

<div class="col-sm-12 col-xs-12">
  <img class="img-responsive envia" src="assets/envviar.png"  usemap="#Map" >
  <map name="Map" id="Map">
    <area shape="rect" coords="200,200,200,200" href="#" alt="aqui">
  </map>	
</div>

我想要点击的部分是“AQUI”。

我添加了 ID，因为我看到一些建议，认为在某些浏览器(如 IE)中需要它。谢谢。

Answer 1

您的坐标不正确:

<div class="col-sm-12 col-xs-12">
  <img class="img-responsive envia" src="/image/FRpHw.png"  usemap="#Map" >
  <map name="Map" id="Map">
    <area shape="rect" coords="530,248,575,270" href="#" alt="aqui" />
  </map>	
</div>

This online tool将使为您的区域生成坐标变得容易。

您的坐标不起作用的原因是因为您为所有 4 个点设置了相同的坐标，这意味着您的区域没有大小。对于一个rect area，4个坐标分别是左上角和右下角的水平/垂直位置，所以需要取不同的值。