HTML:图像映射区域的响应能力

HTML: Image map areas' responsiveness

本文关键字：响应 能力 区域 映射 图像 HTML      更新时间：2023-09-26

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

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

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

更新：

我使用 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html 来提高响应能力，但它会影响地图区域坐标。当我重新加载页面时，地图坐标均为 0，这些坐标仅在调整窗口大小后更新。

有人也有这个问题吗？

图像映射是一种非常古老的创建网站的方式，我使用 photoshop 图像 sílice 并另存为 html 也许你应该尝试一下，您将使用非动态图像，这样您就可以修复宽度和高度等等

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

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

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

并签出 jsfiddle.net/AUNwC/294/例如每个节点都有一个响应式可点击区域(调整窗口大小以检查(

相关文章：