Javascript 在背景图像上放置链接

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

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

---

谢谢

我永远不会推荐使用地图标签。这样做会失去所有的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>

---

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

如果链接是矩形的，那么简单的解决方案是在

位置：相对

背景上使用

位置：绝对

链接

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

---

有关这两种技术的代码示例，请参阅

什么元素的背景图像？可以包含HTML/CSS吗？当触发保存背景图像的div上的onclick事件时，可以捕获鼠标坐标。根据坐标，可以加载不同的页面。这就是您的想法吗？您可以添加任意数量的没有内容的标记-将它们设置为显示：块或内联块，只需设置它们的大小，并使用绝对定位将它们放置在您想要的位置。

#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; }