Mappa di un'immagine responsive
con zone cliccabili

<style>
   .map-container {
   margin: 0 auto;
   color: #267;
   text-align: center;
   font-size: 1.4rem;
   font-weight: bold;
   }
   img[usemap] {
   border: none;
   height: auto;
   max-width: 100%;
   width: auto;
   }  
</style>

<div class="map-container">
   <img src="URL immagine" usemap="#map">
   <map name="map" id="map">
      <area class="zona1" shape="rect" coords="0,0,100,80" href="#" title="Uno">
      <area class="zona2" shape="rect" coords="100,0,200,80" href="#" title="Due">
      <area class="zona3" shape="rect" coords="200,0,300,80" href="#" title="Tre">
      <area class="zona4" shape="rect" coords="0,80,100,160" href="#" title="Quattro">
      <area class="zona5" shape="rect" coords="100,80,200,160" href="#" title="Cinque">
      <area class="zona6" shape="rect" coords="200,80,300,160" href="#" title="Sei">
   </map>
   <div class="selection">
      <p>click su una zona</p>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
   crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" integrity="sha256-H0jJMH37jcA7SQWWbILbmKZkAQyD6pUqbR46qtwAcDs=" crossorigin="anonymous"></script>
<script>
   $(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) {
   if ( $(e.target).closest('area').length === 0 ) {
     $('.selection p').html('click su una zona');
   }  
   });  
   });
</script>