我怎样才能做一个精确的图像形状的鼠标悬停？答案

【问题标题】：How can I do a MouseOver of exact image shape?我怎样才能做一个精确的图像形状的鼠标悬停？
【发布时间】：2009-11-06 15:09:25
【问题描述】：

下面的问题并不是真正的编程问题，而是更多“我该怎么做”的问题，实施建议。

我有一张世界地图的图像。我可以让每个大陆成为一个单独的图像。

我想做的是为每个大陆创建悬停功能。当用户将鼠标移到大陆上时 - 大陆的 EXACT 形状 - 我希望它改变颜色。

我的主要问题是，当用户的鼠标悬停在大陆的确切形状上时，我如何参考？我不想为此使用 Flash，尽管我担心没有其他方法可以做到这一点？

谢谢大家

【问题讨论】：

【解决方案1】：

我知道如何做到这一点的唯一方法（没有外部库或 js）是使用<map>。您必须输入坐标和形状（在本例中为形状的多边形）以匹配您要允许的区域：http://www.w3schools.com/TAGS/tag_map.asp

【讨论】：

谢谢你，不知道可以做正方形/矩形以外的其他形状！
Np。显然，poly 的“精确度”取决于你的理智，但理论上你可以让它接近 100% 匹配。
您可以将路径从 GIMP 导出到 svg 文件。您可以使用 geany 和 excel 编辑这些以将它们转换为区域“poly”坐标：（1）使用 geany 打开文件以选择路径节点的“d”值（跳过行 M 和 C。（2）替换选项卡和逗号到空格（使用 \t 转义字符） (3) 将数据粘贴到 excel 中以删除十进制数字 (4) 复制第 1 和 2 列 (5) 粘贴到 geany (6) 将制表符和换行符替换为逗号（使用 \n转义字符）

【解决方案2】：

在回答您的主要问题时，您可能需要使用良好的旧图像映射。 This image map generator 过去对我很有效。

至于让它们改变颜色，你总是可以使用精灵并在悬停时改变每个国家的背景位置？

【讨论】：

【解决方案3】：

【讨论】：

【解决方案4】：

这取决于您的平台（web、winform、linux、os x 等）。

在网络上，您可以使用图像地图。

在任何操作系统托管的应用程序上，您都可以使用区域来执行等效的图像映射。或者您甚至可以测试您悬停的像素的颜色。

【讨论】：