John Niedzwiecki

JJ,

这是我为下周演讲编写的一段代码（这篇文章是预览），所以我很快就会有一个完整的工作版本。你可以查看我的个人 Github (rhgeek)，但我也会确保在准备好后回来发布一个直接链接通知你。

通过右键单击并检查（结合少量谷歌搜索类名），看起来他们专门使用了名为 image map pro for wordpress 的工具。 话虽如此，你可以自己重新创建该功能。 从技术层面来说，它是这样完成的：他们加载一个图像，根据你想要颅骨、肌肉等，然后在上面覆盖一个 SVG。 如果你检查，你会看到很多多边形。 它所创建的是图像上的形状，以定义你想显示更多信息的 div 区域，例如工具提示。 因此，他们在图像上绘制一个形状来表示什么是额骨，当你悬停时，他们会显示包含所有相关文本的 div。

你可以使用 D3 或直接使用 SVG 自己创建类似的东西。 D3 可以为你提供代码来创建这些部分和交互。 这将取决于总体目标，它可能更像是一个混合解决方案，或者可能是一个甚至不需要 D3 的解决方案。 在这个特定的例子中，最困难的部分是定义与你的区域匹配的区域，因为它在固定图像的顶部。 这是他们的工具显然可以做到的，而且我认为你很可能可以谷歌搜索并找到工具来帮助你定义它，然后再被其他代码使用。

希望这能帮助你走上正确的道路。