HTML 地图和区域未显示答案

【问题标题】：HTML map and area not showing upHTML 地图和区域未显示
【发布时间】：2017-03-17 16:12:55
【问题描述】：

我一直在尝试在图片上放置地图以使其可点击，但是该区域无法正常工作。当我使用 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 等某些浏览器中需要它。谢谢。

【问题讨论】：

shape="rect" coords="200,200,200,200" 描述了一个矩形，它的角都在同一个位置，所以不占空间......

标签： html imagemap

【解决方案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个坐标是左上角和右下角的水平/垂直位置，所以它们需要是不同的值。

【讨论】：

这很完美，是的，这是因为坐标。但是，在小屏幕上它不会工作。但 jquery 可用于更改小屏幕和 XL 屏幕的坐标。
是的，我会使用这个库来解决这个问题：github.com/davidjbradshaw/image-map-resizer 非常容易实现。

【解决方案2】：

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

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

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

【讨论】：

抱歉，我没有投反对票。我一直在寻找另一种使用 Jquery 解决它的方法，但它实际上按照 APAD 所说的方式工作。它可能不会根据屏幕大小自行移动，但现在我可以使用 jquery $(window).width() 根据屏幕大小重新定义坐标。