<div class="container">

  <div class="pyramid">
    <img src="https://res.cloudinary.com/positionrelativ/image/upload/v1492379605/pyramid_1_fu4idd.png" usemap="#Map" />

    <map name="Map" id="Map">
        <area href="#" 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>

<div class="selection">
  <p>click a brick</p>
</div>
body {
  font-family: 'Roboto Slab', serif;
  text-align: center;  
  font-weight: bold;
  font-size: 8vw;
  background-color: #b1adde;
  color: #267;
}

.container {
  margin: 20px auto 0;
  position: relative;
  width: 90%;
}

.pyramid {
  margin: 0 auto;
  width: 90%;
}

img[usemap] {
	border: none;
	height: auto;
  max-width: 100%;
	width: auto;
}  

p {
  margin: 0;  
}
// * 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 p').html($(this).attr('class'));      
    });
  
    $(document).on('click', function(e) {
      e.preventDefault();
      if ( $(e.target).closest('area').length === 0 ) {
        $('.selection p').html('click a brick'); 
      }  
    });
    
  
    
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://res.cloudinary.com/positionrelativ/raw/upload/v1492377595/jquery.rwdImageMaps_lq5sye.js