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

时间:2011-03-29 14:04:02

标签: jquery html html5 imagemap

我已经为假日度假村设计了一个插图的网站地图。它有多个区域,当您翻转时会突出显示并显示一个信息框,其中包含有关您当前所在项目的一些信息。

突出显示的区域与orignal底层地图的位图略有不同,因此使用地图突出显示库不是一种选择。

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

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

构建像这样的交互式地图的最佳方法是什么,我应该将HTML图像映射与某些JS一起使用,还是采用更现代的方法?

1 个答案:

答案 0 :(得分:2)

一种替代方案是SVG,可能使用jquery.svgRaphaël。看看这些例子:

SVG的好处是:

  • 您最终会使用标记来描述您的数据,这最终可以更好地实现可访问性,但也可能会让您感觉良好的语义发光
  • 事件处理程序可以对付处理它们的对象,而不是通过当前鼠标位置和偏移进行回溯
  • 这是part of HTML5