試圖用bootstrap單擊圖像區域

我正在使用構建我的網站的Bootstrap CDN庫。（而且我一般都是HTML新手）試圖用bootstrap單擊圖像區域

我試圖使用圖像作爲索引頁面。映像包含2個地方按鈕應該是：

我設法確定和計算領域，但我不能讓它工作...

<div id= "wrap"> 
<div class="container" id = "c_1"> 


<img id="imag-main" src="pic/start.jpg" class="img-responsive" alt="" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area alt="" title="" href="empty.html" shape="poly" coords="3379,2255,3380,2711,2422,2712,2425,2256" /> 
    <area alt="" title="" href="login.html" shape="poly" coords="3458,2256,4430,2255,4415,2711,3458,2711" /> 

</map> 

</div> 
</div>

有什麼想法？所有的HTML文件都在同一個文件中。

來源

2017-01-17 lolu

具體什麼不起作用？這將成爲一個響應網站？如果是這樣，你需要做一些額外的工作，使你的圖像映射響應。 – hungerstar

是的，但現在我只是希望這兩個區域都會在點擊它們時出現href。 – lolu

您是否考慮過使用SVG（而不是圖像）並將兩個按鈕用錨點包裝？ [沿着這些線]（https://jsfiddle.net/xpwzewcz/）？ – hungerstar

您可以將該img的div放置爲background-image並設置2個位置爲絕對的按鈕/ div。

像這樣：

.home { 
 
    background-color:red; 
 
    width:100%; 
 
    height:100vh; 
 
    position:relative; 
 
} 
 

 
.btn1 { 
 
    width:200px; 
 
    height:200px; 
 
    background-color:blue; 
 
    position:absolute; 
 
    top:20%; 
 
    left:30%; 
 
} 
 

 
.btn2 { 
 
    width:200px; 
 
    height:200px; 
 
    background-color:green; 
 
    position:absolute; 
 
    top:20%; 
 
    left:50%; 
 
}

<div class="home"> 
 
    <a class="btn1" href="#"> 
 
    page one 
 
    </a> 
 
    <a class="btn2" href="#"> 
 
    page two 
 
    </a> 
 
</div>

來源

2017-01-17 15:13:11

試圖用bootstrap單擊圖像區域

回答

相關問題