非矩形CSS图片链接

Question

非矩形CSS图片链接

htmlcssxhtmlimage

3

我有以下需求：

一个大图包含多个需要链接到其他页面的“热点”。听起来很简单。我创建了一个简单的html页面，其中包含带有背景图像和使用CSS的绝对定位链接，以及图像精灵翻转。

但是，现在我又收到了另一张图片，其中的热点不是正方形，而是不规则形状。例如，其中一个例子类似于冲浪板。有什么办法可以使链接只响应图像的实际边界框？还有一些情况下，“热点”是平行四边形形状，并且紧贴在一起。

在这种情况下创建矩形图像并不能达到所需的结果。

我认为imagemaps可能是一种解决方案，但我想先探索所有替代方案。

希望这样说得清楚。

- Mindblip

3个回答

1

HTML图像映射的替代方案是CSS精灵，如这篇A List Apart文章所述。请阅读“不规则形状”下面的部分。

虽然需要一些工作，但最终的HTML将比标准图像映射在语义上更具吸引力（即对搜索引擎更友好）。

- gpilotino

3

不要被副标题“不规则形状”所迷惑 - 文章只使用了矩形。 - RichieHindle

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主页。在其他任何地方单击都不会有任何反应。

- CygnusX1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RichieHindle · Accepted Answer

HTML图像映射是一种不错的选择 - 它们支持任意多边形，并且屏幕阅读器等设备都可以很好地理解。

在现代浏览器中，您可能可以使用SVG做一些聪明的事情，但这对IE6用户无效。