javascript - 美国地图上的悬停工具提示

Question

我想做一个简单的网站，上面有美国的图片。当用户将鼠标悬停在特定状态上时，我想显示一个工具提示，其中包含有关该状态的信息。

我遇到的主要问题是我希望遵守国家的界限。我不想在状态图像上覆盖隐藏的矩形，而是希望工具提示能够响应每个状态轮廓。

最合乎逻辑的方法是什么？我使用的图像类型是否适用于美国（基于位图与基于矢量）？

谢谢您的帮助！。

score 1 · Accepted Answer

你有浏览器限制吗？？因为如果你使用 SVG 图像，你可以很容易地检测到哪些状态被 javascript 点击了。但当然，这在旧浏览器中并不完全支持......！

您可以制作 SVG 图像，Adobe illustrator例如将图像导出为 SVG，并在 html 中将其作为代码使用（您应该使用文本编辑器打开 svg 图像并复制并粘贴代码），然后您可以从中定义您将使用的区域点击..

最好的

score 0 · Accepted Answer

您可以使用 html 标签来映射您的图像，并将每个特定的状态区域定义为一个多边形形状，其中包含一组点来插入状态轮廓。这将是一个非常努力的想法。

score 0 · Accepted Answer

方法 1 - 使用带有常规位图图像（可能是 png）的常规 HTML。使用带有工具提示的图像映射。你可以定义圆形、矩形、多边形等等。它只是简单的 HTML，没有 javascript，但图像是静态的。

方法 2 - 使用 openlayers.org 并使用 gpx / kml 文件或类似文件定义您的区域。这看起来更漂亮，您可以缩放和平移并做各种花哨的事情，包括漂亮的 HTML 弹出窗口，但它需要更多的工作，包括 javascript。

score -1 · Accepted Answer

你应该使用这个解决方案。它已经为你完成了。另请查看文档。

如果你想用鼠标悬停做一些更有趣的事情，你可以使用qtip2，它效果很好。

4 回答 4