我有以下要求：
大图片包含需要链接到其他页面的几个“热点”。听起来很简单。我创建了一个简单的html页面，一个带有背景图像的div和使用CSS与图像精灵翻转的绝对定位链接。
然而，我现在已经看到了另一个图像，热点不是方形，而是不规则的形状。在一个示例中，它们类似于冲浪板。任何想法我如何获得链接只响应图像的实际边界框。还有一些情况是“热点”是平行四边形的，并且彼此相邻。
在此实例中创建矩形图像只是无法达到所需的结果。
我认为图像映射可能是一种解决方案，但我希望首先探索所有替代方案。
希望这是有道理的。
答案 0 :(得分：9)
HTML image maps是要走的路 - 它们支持任意多边形，屏幕阅读器等都能很好地理解它。
您可以在现代浏览器中使用SVG做一些聪明的事情，但它不会适用于IE6人群。
答案 1 :(得分：1)
HTML图像映射的替代方法是Css sprites，如本a list apart article中所述。阅读“不规则形状”下的部分。
这需要一些工作，但最终的HTML在语义上比标准的图像映射更具吸引力（即搜索引擎）。
答案 2 :(得分：0)
如Richie的答案所建议，您也可以在SVG中使用链接。诀窍是将SVG与xlink正确混合。快速解决方案如下所示：
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<a xlink:href="https://stackoverflow.com/">
<polygon points="200,10 250,190 160,210" style="fill:blue;stroke:black;stroke-width:2" />
</a>
</svg>
如果您在多边形上的任意位置单击，将被定向到stackoverflow主页。单击其他任何地方都不会执行任何操作。