带有鼠标悬停的 HTML5 复杂形状答案

【问题标题】：HTML5 Complex Shapes with Mouseovers带有鼠标悬停的 HTML5 复杂形状
【发布时间】：2012-12-10 12:02:03
【问题描述】：

有人知道 Google 是如何在 Youtube 的分析部分创建地图数据的吗？

鼠标悬停在正确的位置，即当您的鼠标离开美国进入加拿大时，加拿大是焦点所在的对象。我对 HTML 的了解告诉我，浏览器只能识别方形，如果你想制作一个非常复杂的形状，你必须编写很多代码。

例如，主页图标中的左侧倾斜不会拾取鼠标事件 p.walkleftstudios.com/am2.1 使用 HTML5 画布和一些三角函数完成。

例如，在这个例子中，我完全忽略了它（画布太烦人了）p.walkleftstudios.com/am2.2

我在代码中看到了一个 SVG 标签，这可能就是魔法发生的地方

【问题讨论】：

【解决方案1】：

大多数 Google 产品都使用 GViz 进行数据可视化。如果你想根据数据输入绘制地图图表，有API可以实现。

GViz 输出为旧版 IE 浏览器的 SVG 或 VML，因此您的图表适用于任何地方 - 旧版、新版、桌面和移动浏览器。

【讨论】：

【解决方案2】：

我相信您正在寻找的是 image maps。

【讨论】：