如何添加圖片地圖鏈接？

我不確定這是否是正確的方法，甚至是問題，所以我會詳細說明。如何添加圖片地圖鏈接？

請訪問此網頁直播http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3

我基本上詢問是否有可能在頭DIV某處覆蓋的鏈接？特別是在右側的貼紙背景圖片上？

我沒有建立網站，但我剛剛將標籤添加到標題div的右角。（僅供參考，它是Joomla網站，因此使用PHP模板文件）。

我做了這個作爲背景圖片，並使用一些填充和負餘量，使其溢出，然後我意識到貼紙需要鏈接到他們的訂單頁面。

將圖像映射成爲鏈接的最佳方式嗎？還是有更好的方法？

如果圖像映射是任何人都有代碼示例的方式。

我嘗試下面的代碼，這是我從一個類似主題的教程編輯，這是行不通

<div id="header" usemap="#Image-Maps_2201202140621298"> 
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298"> 
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/> 
</map> 
</div>

來源

2013-08-19 Daniel Michael Ashton

使用不同的圖像，然後將貼紙鏈接到訂購頁面。 – VenomVendor

如下面的代碼粘貼，它會爲你工作

附加一個<a>到你的頭div的結尾：

<div id="header"> 
    <div... 
    <div id="menu">... 
    <a class="my-map" href="#"></a> 
</div>

，然後添加以下樣式：

#header{ 
    position:relative; 
} 

.my-map{ 
width: 190px; 
height: 190px; 
display: block; 
position: absolute; 
bottom: 26px; 
background: #EEE; 
border-radius: 95px; 
right: 2px; 
}

來源

2013-08-19 17:03:14 AdityaSaxena

這是我正在尋找的答案。謝謝。幾個編輯。我在.my-map類中添加了一個高Z值（999），因此它位於所有內容之上，並將背景值更改爲透明。這比圖像地圖好得多！ –

我不知道圖像映射如何流行的是了:)。您可以使用以下（例如）將元素相對於標題絕對定位。 Codepen素描：http://cdpn.io/klsEp

HTML

<div class='header'> 
    <a class='sticker'>Click me</a> 
</div>

CSS

考慮這個簡單的例子。

.header { 
    background: green; 
    height: 200px; 
    position: relative; 
    width: 800px; 
} 

.sticker { 
    background: red url('..') no-repeat center; 
    bottom: -20px; 
    color: white; 
    cursor: pointer; 
    display: block; 
    height: 100px; 
    position: absolute; 
    right: -30px; 
    width: 100px; 
} 

.sticker:hover { 
    background: black; 
}

來源

2013-08-19 17:01:42 kunalbhat

在你的HTML中，I找不到menu_bg6.png的聯繫，但也就是你必須把usemap=標籤，如：

<img src="menu_bg6.png" alt="an image" usemap="#usethismap">

因此，不會對DIV標籤，但IMG標記。

然後你可以創建一個相應的<map>標籤，它應該適合你（儘管，不要忘記插入一個URL來實現點擊動作 - 目前你的是'＃'）。

Here is a simple jsFiddle更多關於在圖片上定位可點擊區域的想法。

Here is an article討論如何爲DIV創建僞「圖像映射」 - 沒有IMG標記。

來源

2013-08-19 17:20:16 gibberish

如何添加圖片地圖鏈接？

回答

相關問題