HTML:图像映射区域的响应性

时间:2014-10-24 16:31:47

标签: javascript html css imagemap

我需要在我的网站上使用图片地图,为图片的每个部分添加不同的链接。

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

任何人都可以帮我吗?该方法并不重要,我可以使用Js或Css。

更新

我使用http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html来表示响应,但它会影响地图区域的坐标。当我重新加载页面时,地图坐标全部为0,仅在调整窗口大小后才会更新。

有人也有这个问题吗?

2 个答案:

答案 0 :(得分:0)

Imagemap是一种非常古老的创建网站的方式我喜欢使用photoshop图像sílice并保存为html也许你应该尝试它,你将使用非动态图像,这样你可以修复宽度和高度等等

答案 1 :(得分:0)

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

您可以为每个节点属性分配链接,样式和悬停事件,Raphael允许您设置viewBox,以便在调整大小时进行缩放(无法链接为排名不够高 - 可以轻松找到帮助虽然如此)

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

并查看jsfiddle.net/AUNwC/294/,例如每个节点都有一个响应可点击区域(调整大小窗口)