构建交互式插图地图的最佳方法?
我有一个为度假胜地设计的带插图的站点地图。它有多个区域,当您将鼠标悬停在这些区域上时,会突出显示并显示一个信息框,其中包含有关您当前所在项目的一些信息。
突出显示区域的位图与原始底层地图略有不同,因此不能选择使用地图突出显示库。
当用户将鼠标悬停在某个区域上时,需要显示覆盖的图像以及信息框。
这些区域不是方形的,一些突出显示的项目被分成多个区域。
构建这样的交互式地图的最佳方法是什么,我应该使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
一种替代方案是 SVG,可能使用 jquery.svg 或 拉斐尔。看一下这些示例:
SVG 的好处是:
One alternative would be SVG, perhaps using jquery.svg or Raphaël. Have a look at these examples:
The benefits of SVG are: