title: How to make responsive each area of an image map
body: <p>I have this image map and I am trying for the way to make each selected area responsive... because when changing the size of the screen, the image adapts correctly, but the areas do not adapt to the new size of the image. here you can see the selected area in blue.</p>
  
  <p><strong>BLUE AREA IS SELECTED</strong>
  <a href="https://i.stack.imgur.com/Ft9T9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ft9T9.jpg" alt="normal size"></a>
  <strong>HERE I CHANGE THE SIZE OF SCREEN BUT THE AREA DONT FOLLOW THE IMAGE</strong>
  <a href="https://i.stack.imgur.com/BjhF4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BjhF4.jpg" alt="other size"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="img-fluid" src="https://image.ibb.co/jaFWgv/MENU.jpg" alt="" usemap="#Map" /&gt;
  &lt;map name="Map" id="Map"&gt;
          &lt;area class="img-fluid" shape="rect" href="codificador" coords="215, 310, 328, 396" /&gt; &lt;!--Codificador 3--&gt;
          &lt;area class="img-fluid" shape="rect" href="codificador" coords="215, 191, 328, 277" /&gt;  &lt;!--Codificador 2--&gt;
          &lt;area class="img-fluid" shape="rect" href="codificador" coords="215, 70, 328, 156"  /&gt; &lt;!--Codificador 1--&gt;
          &lt;area shape="rect" href="multiplexor"coords="419, 175, 471, 290"  /&gt; &lt;!--Multiplexor--&gt;
          &lt;area shape="rect" href="remux"  coords="596, 177, 647, 291"    /&gt; &lt;!--Remultiplexor--&gt;
          &lt;area shape="rect" href="modulador"    coords="771, 174, 821, 293" /&gt; &lt;!--Modulador--&gt;
          &lt;area shape="poly" href="#"  coords="142, 98, 204, 98, 204, 94, 218, 102, 204, 109, 204, 104, 142, 105" /&gt; &lt;!--Flecha HD--&gt;
          &lt;area shape="poly"  href="#" coords="142, 217, 204, 217, 204, 213, 218, 221, 202, 227, 204, 223, 142, 224" /&gt;&lt;!--Flecha SD--&gt;
          &lt;area shape="poly"href="#" coords="141, 365, 203, 365, 203, 361, 217, 369, 203, 376, 203, 371, 141, 372" /&gt;&lt;!--Flecha LD--&gt;
          &lt;area shape="poly" href="#" coords="327, 107, 358, 107, 358, 203, 402, 203, 402, 195, 424, 206, 402, 217, 402, 211, 349, 211, 348, 116, 327, 116"/&gt; &lt;!--Flecha ASI 1--&gt;
          &lt;area shape="poly" href="#" coords="329, 230, 405, 229, 405, 226, 424, 233, 405, 241, 405, 236, 329, 237" /&gt;&lt;!--Flecha ASI 2--&gt;
          &lt;area shape="poly" href="#" coords="327, 361, 358, 361, 359, 265, 403, 265, 402, 272, 424, 263, 402, 253, 402, 259, 349, 259, 349, 354, 327, 354" /&gt; &lt;!--Flecha ASI 3--&gt;
          &lt;area shape="poly"  (click)="TSmethod()" coords="471, 230, 583, 230, 582, 228, 600, 233, 582, 240, 583, 236, 471, 237" /&gt;&lt;!--Flecha TS--&gt;
          &lt;area shape="poly" (click)="BTSmethod()" coords="644, 230, 756, 230, 755, 228, 773, 233, 755, 240, 756, 236, 644, 237" /&gt;&lt;!--Flecha BTS--&gt;
  &lt;/map&gt;
  
      &lt;script  src="../js/imageMapResizer.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          
                  $('map').imageMapResize();
          
              &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>