image - 复杂的 HTML5 图像映射？

Question

我有一张客厅的图片，我正在将其变成我正在开发的新网站的菜单。这个想法是，您可以单击房间中的某些物品，例如椅子、桌子、沙发等，然后转到所需的页面。我想知道是否有一种聪明的方法可以做到这一点。由于项目不是简单的形状，我不想使用标准的图像映射。

谢谢你的帮助！

Answer 1

我回答是因为谷歌搜索把我带到了这里......

因为你要求一个工具：

GIMP 有一个非常好的图像地图创建功能。

在 GIMP 中打开您的图像，然后选择 Filters > Web > ImageMap

从那里您可以通过在图像上绘图来创建图像映射。保存将生成 HTML，然后您可以根据需要进行定制。

Answer 2

正如 Korvin 所提到的，在 SVG 中执行此操作可能是最简单的选择，因为您可以将事件附加到 SVG 中的对象，而不必手动指定侦听事件的特定区域。

如果你走这条路，我建议使用 RaphaelJS 库，它具有良好的语法和在 IE 预版本 9 中工作的优势。这是一个演示，虽然它使用 onmouseover 而不是 onclick，但它可能接近你的试图达到：

http://raphaeljs.com/australia.html

Answer 3

这个工具看起来是一个可靠的图像映射器：http ://www.image-maps.com/ 我建议用画布和 SVG 来做这个，它会让这更容易，更专业。