Versuch, mit Bootstrap auf einen Bildbereich zu klicken

Question

Ich verwende die Bootstrap CDN-Bibliothek, die meine Website erstellt. (Und ich bin neu in HTML im Allgemeinen)

Ich versuche, ein Bild als Indexseite zu verwenden. Das Bild enthält zwei Orte, an denen Tasten sein sollte:

ich es geschafft, die Bereiche zu bestimmen und zu berechnen, aber ich kann es nicht ...

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

irgendwelche Gedanken machen arbeiten? Alle HTML-Dateien befinden sich in derselben Datei.

Answer 1

Sie können ein div mit diesem img als background-image platzieren und 2 buttons/divs mit absoluter Position setzen.

So:

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