HTML地图和区域没有显示

我一直在试图放置在一张图片上的地图，使其可以点击，但是，该区域无法正常工作。当我使用Chrome开发人员工具检查页面时，它显示为0x0区域。这是代码。HTML地图和区域没有显示

<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> \t 
 
</div>

，我想可以点击的部分地方说： “AQUI”。

我添加了ID，因为我看到了一些浏览器（如IE）需要的建议。谢谢。

来源

2017-03-17 Paco Meraz

'shape =“rect”coords =“200,200,200,200”'描述了一个矩形的角落都是相同的位置，所以它不需要空间...... – Johannes

你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> \t 
 
</div>

This online tool将可以很容易产生coords您areas。

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

来源

2017-03-17 16:42:27 APAD1

这个工作完美，是的，这是因为coords。但是，在小屏幕上它不会工作。但jquery可以用来改变小屏幕和XL屏幕的坐标。 –

是的，我会用这个库来解决这个问题：https://github.com/davidjbradshaw/image-map-resizer非常容易实现。 – APAD1

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

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

这下了票？但我是正确的，所以不管你不喜欢我的答案是真的。

来源

2017-03-17 16:43:59 IDED

对不起，我没有downvote。我正在寻找另一种方式来解决它与JQuery的，但它实际上是APAD的方式说。它可能不会根据屏幕大小自行移动，但现在我可以使用jquery $（window）.width（）根据屏幕大小重新定义坐标。 –

HTML地图和区域没有显示

回答

相关问题