le risposte semplici

Mappa di un'immagine responsive
con zone cliccabili

Per ottenere la mappa di un'immagine che sia responsive, cioè ottimizzata per i dispositivi mobili, è possibile utilizzare la libreria jQuery.
Ecco il codice:
<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>

I parametri da personalizzare sono quelli in rosso, in questo modo:
Naturalmente, al posto delle coordinate di esempio, dovrete mettere le vostre coordinate. Maggiori informazioni leggendo: Coordinate delle zone di un'immagine
Al posto di "click su una zona" potete mettere il testo che preferite.
Se volete che, cliccando su una zona, si apra un collegamento interno, o esterno, potete inserirne il percorso, o l'indirizzo, al posto del cancelletto in href="#".
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: