尝试使用引导程序单击图像区域

Question

我正在使用构建我的网站的Bootstrap 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>

任何想法？所有HTML文件都在同一个文件中。

Answer 1

您可以将带有img的div作为背景图像放置，并将2个按钮/ div设置为绝对位置。

像这样：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;