ブートストラップで画像領域をクリックしようとしています

Question

私のウェブサイトを構築するブートストラップCDNライブラリを使用しています。 （そして私は一般的にHTMLの初心者です）

私はインデックスページとして画像を使用しようとしています。

は私が決定した領域を計算するために管理が、私はそれを動作させることができない...

<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> 

任意の考え： 画像は、ボタンがあるべき2ヶ所が含まれていますか？すべてのHTMLファイルは同じファイルにあります。

Answer 1

このimgを背景画像として配置し、2つのボタン/ divをposition absoluteで設定できます。このよう

：

.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>