<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="pyramid">
<img src="https://res.cloudinary.com/positionrelativ/image/upload/v1492379605/pyramid_1_fu4idd.png" usemap="#Map" class="img-fluid" />
<map name="Map" id="Map">
<area href="https://www.google.com/" shape="poly" class="brick 1" coords="669,0,405,268,931,265" />
<area href="#" shape="poly" class="brick 2" coords="399,269,681,268,673,468,227,455" />
<area href="#" shape="poly" class="brick 3" coords="685,267,934,267,1134,473,676,468" />
<area href="#" shape="poly" class="brick 4" coords="220,458,33,641,378,640,540,465,224,458" />
<area href="#" shape="poly" class="brick 5" coords="542,467,380,643,975,641,802,471,547,467" />
<area href="#" shape="poly" class="brick 6" coords="809,473,1137,476,1315,645,980,642,811,472" />
</map>
</div>
<div class="selection"> click a brick</div>
<script src="https://res.cloudinary.com/positionrelativ/raw/upload/v1492377595/jquery.rwdImageMaps_lq5sye.js"></script>
body {
font-family: 'Roboto Slab', serif;
text-align: center;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
// * img coords generated with
// http://imagemap-generator.dariodomi.de/
// * made responsive with
// https://github.com/stowball/jQuery-rwdImageMaps
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('focus', function(e) {
e.preventDefault();
$('.selection').html($(this).attr('class'));
});
$(document).on('click', function(e) {
e.preventDefault();
if ( $(e.target).closest('area').length === 0 ) {
$('.selection').html('click a brick');
}
});
});
