带有css的图像上的超链接映射答案

【问题标题】：Hyperlink map on image with css带有css的图像上的超链接映射
【发布时间】：2016-01-07 11:27:10
【问题描述】：

我有一个图片示例：

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

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

等等。

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

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

【问题讨论】：

是他们不能使用区域标签和多边形的原因吗？
只需使用此页面制作您想要的所有形状：image-maps.com

标签： html css svg imagemap

【解决方案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 工具可以为您做到这一点。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：