html - 图像上的超链接 map 与CSS

Question

我有一个图像示例:

这是一张包含多个元素的办公 table 图片，我正在尝试找到一种方法让部分图片具有交互性。

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

等等。

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

这可能吗？

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

我知道我可以使用:

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

Polygon

This expects as many pairs of coordinates as you need to make your polygon. These can make any polygon shapes you need, and can have sloping lines. All coordinates are specified as horizontal position then vertical position, with all of them in a long comma separated list. The last pair of coordinates can optionally match the first. An example would be:

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

有几个imagemaps generator可以为您做到这一点的在线工具。