HTML：图像地图区域的响应能力答案

【问题标题】：HTML: Image map areas' responsivenessHTML：图像地图区域的响应能力
【发布时间】：2014-10-24 16:31:46
【问题描述】：

我需要在我的网站中使用图片映射，为图片的每个部分添加不同的链接。

但我的响应能力有问题。调整窗口大小时，我无法更改地图区域的大小。

谁能帮我解决这个问题？方法不重要，Js或者Css都可以。

更新：

我使用http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html 进行响应，但它会影响地图区域坐标。当我重新加载页面时，地图坐标都是 0，只有在调整窗口大小后才会更新。

有人也有这个问题吗？

【问题讨论】：

【解决方案1】：

Imagemap 是一种非常古老的创建网站的方法，我更喜欢使用 Photoshop 图像切片并保存为 html，也许你应该尝试一下，因为你将使用非动态图像，这样你可以修复宽度和高度等等

【讨论】：

【解决方案2】：

如果您将图像保存为矢量图像，则可以将其保存为 SVG 并使用 RaphaelJS。我最近才拿起它，但是一旦你掌握了它，它就很容易使用。

您可以为每个节点属性分配链接、样式和悬停事件，Raphael 允许您设置 viewBox 以便它在调整大小时缩放（不能链接，因为排名不够高 - 虽然可以在 SO 上轻松找到帮助)

以下是一些使用 RaphaelJS 的示例：LINK1 LINK2

并查看 jsfiddle.net/AUNwC/294/ 例如每个节点具有响应式可点击区域（调整窗口大小以检查）

【讨论】：