具有触发弹出内容的可选区域的 HTML 图像映射

Posted 2023-05-08

【中文标题】具有触发弹出内容的可选区域的 HTML 图像映射

【英文标题】：HTML Image map with selectable regions triggering popup content

【发布时间】：2013-08-05 23:17:33

【问题描述】：

我已经很久没有做图像映射了！大概需要 4-5 年。

上次我使用标签和为多边形创建标签来实现这一点。这当然有效，并且仍然支持 html，即使在 HTML5 中也是如此。问题是，这仍然是图像映射的好方法吗？还是我应该放弃这个方向，转而使用 Canvas 或 SVG 技术？

决定有几个因素：

客户端使用 IE7，所以解决方案必须与 IE7 和 IE8 一起使用，因此我认为不使用 SVG 或 Canvas，我想使用旧的学校地图标签会更容易，至少它可以轻松跨过所有平台。 地图具有非常自定义的样式（在具有边距间隙的区域周围也有笔划） 每个区域都有一个翻转状态，每个区域都有一个内容独特的弹出窗口。这必须通过 JS 来实现。使用 JS 使用 map 标签与地图的 DOM 结构交互有什么问题吗？ 这不是必需的，但我想让地图对视口有所响应。

坦率地说，使用标签感觉真的很老派，过时和肮脏。但是，老实说，就我而言，这似乎是最合适的解决方案。大家怎么看？

欢迎任何反馈，

谢谢， 克雷格

【参考方案1】：

对于您的要求，我认为最好的套件是 SVG。通过一些解决方法，您可以使用一直以来最喜欢的 jQuery 和 SVG，并如此快速地构建很酷的东西。我能够在两周内开发出带有 SVG 地图的剧院订票工具。

此外，现在每个人都需要移动设备上的所有东西，而且它可以在移动设备上轻松运行。

尝试说服客户升级 IE，这对你最好。一切顺利。