构建交互式插图地图的最佳方法?

发布于 2024-10-27 21:22:01 字数 265 浏览 3 评论 0原文

我有一个为度假胜地设计的带插图的站点地图。它有多个区域,当您将鼠标悬停在这些区域上时,会突出显示并显示一个信息框,其中包含有关您当前所在项目的一些信息。

突出显示区域的位图与原始底层地图略有不同,因此不能选择使用地图突出显示库。

当用户将鼠标悬停在某个区域上时,需要显示覆盖的图像以及信息框。

这些区域不是方形的,一些突出显示的项目被分成多个区域。

构建这样的交互式地图的最佳方法是什么,我应该使用 HTML 图像地图和一些 JS 还是有更现代的方法?

I've had an illustrated sitemap designed for a holiday resort. It's has multiple areas that when you roll over highlight and display a information box with some info about the item that you're currently over.

The highlighted areas have a slightly different bitmap than the orignal underlying map so using a map highlight library is not an option.

When the user mouses over an area it needs to display an image overlaid as well as the info box.

The areas are not square and some highlighted items are split into multiple areas.

What is the best approach to building an interactive map like this, should I use HTML imagemap with some JS or is there a more modern approach?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

独﹏钓一江月 2024-11-03 21:22:01

一种替代方案是 SVG,可能使用 jquery.svg拉斐尔。看一下这些示例:

  • 分析 - 图形数据上的弹出窗口
  • 饼图 - 元素随着鼠标悬停而动画
  • 澳大利亚 - 一个包含实际地图的示例

SVG 的好处是:

  • 您最终会得到描述数据的标记,这最终可以更好地提高可访问性,但也可能给您带来良好的语义辉光
  • 事件处理程序可以与处理它们的对象一起生活,而不是通过当前鼠标位置和偏移回溯
  • 它是 HTML5 的一部分

One alternative would be SVG, perhaps using jquery.svg or Raphaël. Have a look at these examples:

  • Analytics - popups over graphical data
  • Pie chart - elements animate in response to mouse overs
  • Australia - an example with an actual map in it

The benefits of SVG are:

  • You end up with markup describing your data, which ultimately can be better for accessibility but might also give you a feel-good semantic glow
  • Event handlers can live against the objects which handle them, rather than backtracking through current mouse position and offsets
  • It's part of HTML5
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文