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

Hover-Over Tooltip on Map of the United States

本文关键字：工具提示地图美国悬停更新时间：2023-09-26

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

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

怎么做才最符合逻辑呢?我在美国使用的图像类型是(位图还是矢量图)?

感谢您的帮助

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

您可以使用Adobe illustrator作为示例将SVG图像导出为SVG，并将其作为代码在html中使用(您应该使用文本编辑器打开SVG图像，复制并粘贴代码)，然后从它们可以定义您将单击的区域。

最好

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

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

您可以使用html标记来映射您的图像，并将每个特定的状态区域定义为带有一组点的多边形形状，以插入状态轮廓。这将是一个地狱的努力认为。

您应该使用这个解决方案。你已经做得差不多了。也可以查看文档。

如果你想在鼠标上方做一些更花哨的事情，你可以使用qtip2，它工作得很好