html - 尝试使用 Bootstrap 单击图像区域

Question

我正在使用 Bootstrap CDN 库构建我的网站。 (一般来说，我是 HTML 的新手)

我正在尝试使用图像作为索引页。 图像包含按钮应位于的 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 文件都在同一个文件中。

Answer 1

您可以放置​​一个带有该 img 的 div 作为背景图像，并设置 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>