HTML/CSS：放置圖像內的鏈接

我有一個靜態圖像，其中包含一個網頁上顯示的地圖。圖像內有幾個代表城市的點。我必須讓每個點都成爲一個可點擊的鏈接，將用戶重定向到另一個頁面。我正在尋找最好的方法來記住一些點彼此接近。HTML/CSS：放置圖像內的鏈接

我一直在想在相同尺寸的圖片上創建一個div，然後在其內部放置固定尺寸的較小div（實際上是小方塊），每個較小的div都是一個鏈接。有沒有更好的方法來做到這一點？

2014-09-25 mmvsbg

影像地圖可以工作。 – zzzzBov 2014-09-25 05:18:11

我認爲你的想法聽起來不錯<div>和<a>。我寧願用這種方法而不是<map>。因爲您可以隨意自由設計風格，並且更容易使風格動態化。你甚至可以更進一步，然後我在演示中製作了一個<div>而不是點擊區域，如果你喜歡的話，在中間有一個點代表一個區域（如果這有意義的話？）。

DEMO

<div class="map__image"> 
    <a href="#" id="first" class="map__link"></a> 
    <a href="#" id="second" class="map__link"></a> 
    <a href="#" id="third" class="map__link"></a> 
</div> 

.map__image { 
    background: url(https://lh5.ggpht.com/RPZEPRAtdW4lSTE0v1vXe8z9GEmgMSp84ZCEmdb8SJ5-acTtcnvgFjwjWsK7hiejzjQ=w300) no-repeat; 
    width: 300px; 
    height: 300px; 
    position: relative; 
} 

.map__link { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: red; 
} 

#first { 
    top: 30px; 
    left: 100px; 
} 

#second { 
    top: 100px; 
    left: 200px; 
} 

#third { 
    top: 220px; 
    left: 150px; 
}

來源

2014-09-25 05:36:45

這非常有意義，正是我想要的。我也檢查了其他解決方案，但地圖/區域方法並沒有給你足夠的自由來玩，而這個解決方案非常強大。謝謝！ – mmvsbg 2014-09-26 05:37:33