在背景图片上放置链接

我想要将链接放置在背景图片上（用CSS设置），我想问的是有没有地图标记的替代方法？一个HTML5或优雅的JS解决方案？在背景图片上放置链接

注意：图像本身不是地图。我只是想将5个环节上的特定位置

感谢

来源

2012-03-27 Wel

什么元素的背景图片？你能包括你的HTML/CSS吗？ – ManseUK 2012-03-27 16:11:09

普通链接或区域？ – j08691 2012-03-27 16:12:40

当触发持有背景图像的div上的onclick事件时，您可以捕获鼠标坐标。根据坐标，您可以加载不同的页面。这是你想到的吗？ – Amberlamps 2012-03-27 16:14:10

我决不会建议使用地图标记。你这样做失去了所有的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; }

的联系顶部和左侧，将决定它在后台位置。确保已设置高度和宽度，并设置显示块和文本缩进以删除文本并正确格式化。

来源

2012-03-27 16:13:54 Blazedd

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

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

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

来源

2012-03-27 16:46:45

在背景图片上放置链接

回答

相关问题