HTML地图和区域未显示

Question

我一直试图在地图上放置地图以使其可点击，但是，该地区无法正常工作。当我使用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

您的coords不正确：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

This online tool可以轻松为coords生成areas。

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

Answer 2

您需要定义图像的大小才能使图像映射起作用，这意味着它不会响应。 你最好看一个插件，让它按照你的方式工作。 另一方面，Chrome开发工具并没有显示它的位置，但如果你将鼠标悬停在原点，它就是你设置它的位置。

我建议https://github.com/stowball/jQuery-rwdImageMaps获取您正在寻找的响应式设计。

这被投了票？但我是对的，所以不管你不喜欢我的答案是真的。