在背景圖片上放置鏈接

我想要將鏈接放置在背景圖片上（用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

在背景圖片上放置鏈接

回答

相關問題