是否可以按百分比创建地图html区域？

Question

我需要创建这样的东西:

http://www.mrporter.com/journal/journal_issue71/2#2

我的大图像中的每个产品都与鼠标悬停时出现的工具提示相关联.但我需要这个才能使用全屏图像.

我认为的第一个解决方案(如上例所示)是map html解决方案,其中每个解决方案都填充了我的产品的边界.问题是我无法为我指出精确的值,因为我的图像大小取决于窗口屏幕.

最好的解决方案是为我的区域设置百分比值.这可能吗？还有其他建议吗？

Answer 1

使用链接的替代方案:

CSS:

.image{
  position: relative;
}
.image a{
  display: block;      
  position: absolute;
}

HTML:

<div class="image">
  <img src="image.jpg" alt="image" />
  <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a>
</div>

可以在图形编辑器中检测百分比尺寸

Answer 2

这个jQuery RWD Image Maps有一个 jQuery 插件。

您可能希望（手动）集成我的待处理拉取请求以支持“width=100%”：https : //github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 3

图像映射中的百分比不是一个选项。您可能需要一些脚本（JS）来重新计算图像调整大小的确切位置。当然，如果需要，您可以在该脚本中使用百分比。