在背景图像上放置链接

Question

我想在背景图片上放置链接（在CSS中设置），我想问一下是否有地图标签的替代品？ HTML5或优雅的JS解决方案？

注意：图像本身不是地图。我只想在特定位置放置5个链接

感谢

Answer 1

我绝不会建议使用地图标签。你失去了这样做的所有SEO价值。我建议你使用类似的语法：

<div id="backgroundElement">
 <a href="#" id="link1">Follow Me on Twitter</a>
 <a href="#" id="link2">Follow Me on Facebook</a>
 <a href="#" id="link2">Follow Me on Google+</a>
</div>

并在CSS中使用

#backgroundElement{ position:relative; background:url(image/bg.jpg) no-repeat; }
#link1{ position:absolute; top:150px; left:200px; background:url(image/icon/twitter.png) no-repeat; height:24px; width:24px; display:block; text-indent:-9999em; }

顶部和左侧的链接将确定它在背景上的位置。确保设置了高度和宽度，并设置了显示块和文本缩进以删除文本并正确格式化。

Answer 2

如果您的链接是矩形的，那么简单的解决方案就是在position:absolute背景上使用position:relative个链接。

如果您的链接是非矩形的，那么您可以捕捉背景元素上的click（）事件，然后在坐标与“热”区域匹配时执行相应的操作。

有关这两种技术的代码示例，请参阅http://jsfiddle.net/STjfz/2/。