图像上的超链接映射与CSS

Question

我有一个图片示例：

这张桌子上有几个元素的图片，我试图找到一种方法让图片的各个部分互动。

示例 - 单击监视器，将您定向到所需的链接。 发言者 - 不同的链接

等等。

问题是解决方案必须是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>

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

Answer 1

您可以使用来自Polygon的形状poly。

  

<强>多边形

     

这需要你需要多对坐标来制作多边形。这些可以制作您需要的任何多边形形状   倾斜的线条。所有坐标都指定为水平位置   然后垂直位置，所有这些都以长逗号分隔   名单。最后一对坐标可以选择匹配第一对。一个   例如：

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

在线有几种imagemaps generator工具可以帮助您。

Answer 2

您可以使用地图生成工具轻松快速地为每个coords获取poly。我试过这个Imagemap-generator。您所需要的只是绘制您需要链接的区域（就像我在这里所做的那样：https://gyazo.com/7ddba6578cd1ebfe4f31088d40f1cf06）并在最后获取代码。

E.g。对于发言者，代码将是

<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>