製作可點擊的圖像

我有一個背景圖像的部分採用這種方式製作可點擊的圖像

HTML 

<div id="background"> 
    <img src="stock.png" class="stretch" alt="image" /> 
</div> 

CSS 

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 

.stretch { 
    width:100%; 
    height:100%; 
}

我想有像可點擊的區域的一部分，所以它會聯繫我的下一個頁面，任何這樣做的簡單方法？

來源

2013-03-20 Aaron

可能的重複[如何使圖像的一個部分爲可點擊的鏈接]（http://stackoverflow.com/questions/18560097/how-to-make-a-section-of-an-image-a- clickable-link） – Makyen 2017-02-07 00:50:45

位置你總是可以做一個鏈接relative和z-index它的正確位置：

<div id="background"> 
    <img src="stock.png" class="stretch" alt="image" /> 
    <a href="path/to/url/" class="link"></a> 
</div>

然後是這樣的：

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 
.stretch { 
    width:100%; 
    height:100%; 
    z-index:1; 
} 
.link { 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    display:block; 
    z-index:2; 
}

然後移動和樣式鏈接，你會用CSS和/或圖像。

來源

2013-03-20 22:14:07 faino

試過這個，但它沒有覆蓋圖像，只是在底部創建一個鏈接 – Aaron 2013-03-20 22:22:34

是的，這是未經測試的，我的道歉;鏈接定位中存在拼寫錯誤。我已經更新了代碼，它在我的最後工作正常。對於那個很抱歉。 – faino 2013-03-20 22:29:53

完美地工作，謝謝我的男人你能解釋一下z-index在那裏做了什麼嗎？ – Aaron 2013-03-20 22:35:38

好再添DIV與position: absolute;，然後定義他的這個

left:100px; 
top:100px;

來源

2013-03-20 22:10:38 Kyrbi

當在不同的分辨率下查看時，它不會改變它的位置嗎？ – Aaron 2013-03-20 22:11:17

那麼用百分數來定義它。 – Kyrbi 2013-03-20 22:15:49

我知道這是一個老問題，但在我看來，最簡單和最好的方式來做到這一點將與圖像映射。它們非常簡單，基本上你可以在圖像上定義可點擊的形狀（矩形，圓形，甚至是多邊形，但我從來沒有使用過）。形狀的座標和大小都與圖像有關，因此非常靈活。

http://www.w3schools.com/tags/tag_map.asp說明如何使用它。

來源

2014-07-24 17:42:42

製作可點擊的圖像

回答

相關問題