美国地图上的悬停工具提示答案

【问题标题】：Hover-Over Tooltip on Map of the United States美国地图上的悬停工具提示
【发布时间】：2013-03-26 15:47:52
【问题描述】：

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

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

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

感谢您的帮助！

【问题讨论】：

【解决方案1】：

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

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

最好的

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您应该使用this solution。它已经为你完成了很多。另请查看the docs。

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

【讨论】：