Попытка нажать на область изображения с bootstrap

Я использую библиотеку Bootstrap CDN, создающую мой веб-сайт. (И я новичок в HTML в целом)

Я пытаюсь использовать изображение в качестве страницы индекса.
Изображение содержит 2 места, где должны быть кнопки:

Изображение содержит 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 файлы находятся в одном файле.

1 ответ

  1. Вы можете разместить div с этим img В качестве фонового изображения и установить 2 кнопки/divs с абсолютным положением.

    Вроде этого:

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