Html 基于css的图像超链接映射

我有一个图像示例：

这是一张包含多个元素的桌子图片，我试图找到一种方法使图片的各个部分相互作用

示例-单击监视器，指向所需链接。 扬声器-不同链接

等等

问题是，解决方案必须是CSS和HTML，而不使用JavaScript或其他任何东西

这可能吗

到目前为止，我只找到了一些制作交互式svg地图的网站

我知道我可以使用：

<img src="http://i.stack.imgur.com/EerkN.jpg" usemap="#menu_header" />
<map name="menu_header">
  <area coords="117,214,271,266" href="X" shape="rect" />
  <area coords="272,214,411,266" href="X" shape="rect" />
  <area coords="412,214,635,266" href="X" shape="rect" />
  <area coords="636,214,816,266" href="X" shape="rect" />
</map>

---

但我希望使用与扬声器、显示器等完全相同的形状，而不仅仅是矩形。

您可以使用来自多边形的形状

poly

多边形

这需要创建多边形所需的任意多对坐标。这些可以制作您需要的任何多边形形状，并且可以 倾斜的线条。所有坐标都指定为水平位置 然后是垂直位置，所有位置用一个长逗号分隔 列表最后一对坐标可以选择与第一对坐标匹配。一 例如：

shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"

---

有几种在线工具可以为您实现这一点。

您可以使用地图生成器工具轻松快速地获取每个

多边形的
坐标。我试过这个。您所需要的只是绘制需要链接的区域（就像我在这里所做的那样：），并在最后获得代码

例如，对于扬声器，代码将为

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="poly" coords="80,895,134,855,194,813,239,766,275,726,319,669,364,647,397,645,442,666,476,705,501,746,513,805,527,856,550,921,578,979,608,1039,604,1107,584,1144,544,1185,454,1218,285,1216,134,1151,42,1033,45,944,174,824" />
    [...]
</map>


[...]
它们是您不能使用区域标记和多边形的原因吗？只需使用此页面制作您想要的所有形状：