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不正确：

<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>

This online tool 可以很容易地为您的 areas 生成 coords。

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

Answer 2

您需要为图像映射定义图像的大小，这意味着它不会响应。您最好查看一个插件以使其按照您尝试的方式工作。附带说明 Chrome 开发工具不显示它的位置，但它正是你设置它的位置，如果你悬停鼠标你会看到它。

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

这被否决了？但我是对的，所以不管你不喜欢我的回答都是真的。

HTML 地图和区域未显示

HTML map and area not showing up

html

imagemap