How to make responsive each area of an image map

问题

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.

BLUE AREA IS SELECTED HERE I CHANGE THE SIZE OF SCREEN BUT THE AREA DONT FOLLOW THE IMAGE

<img class="img-fluid" src="https://image.ibb.co/jaFWgv/MENU.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
        <area class="img-fluid" shape="rect" href="codificador" coords="215, 310, 328, 396" /> <!--Codificador 3-->
        <area class="img-fluid" shape="rect" href="codificador" coords="215, 191, 328, 277" />  <!--Codificador 2-->
        <area class="img-fluid" shape="rect" href="codificador" coords="215, 70, 328, 156"  /> <!--Codificador 1-->
        <area shape="rect" href="multiplexor"coords="419, 175, 471, 290"  /> <!--Multiplexor-->
        <area shape="rect" href="remux"  coords="596, 177, 647, 291"    /> <!--Remultiplexor-->
        <area shape="rect" href="modulador"    coords="771, 174, 821, 293" /> <!--Modulador-->
        <area shape="poly" href="#"  coords="142, 98, 204, 98, 204, 94, 218, 102, 204, 109, 204, 104, 142, 105" /> <!--Flecha HD-->
        <area shape="poly"  href="#" coords="142, 217, 204, 217, 204, 213, 218, 221, 202, 227, 204, 223, 142, 224" /><!--Flecha SD-->
        <area shape="poly"href="#" coords="141, 365, 203, 365, 203, 361, 217, 369, 203, 376, 203, 371, 141, 372" /><!--Flecha LD-->
        <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"/> <!--Flecha ASI 1-->
        <area shape="poly" href="#" coords="329, 230, 405, 229, 405, 226, 424, 233, 405, 241, 405, 236, 329, 237" /><!--Flecha ASI 2-->
        <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" /> <!--Flecha ASI 3-->
        <area shape="poly"  (click)="TSmethod()" coords="471, 230, 583, 230, 582, 228, 600, 233, 582, 240, 583, 236, 471, 237" /><!--Flecha TS-->
        <area shape="poly" (click)="BTSmethod()" coords="644, 230, 756, 230, 755, 228, 773, 233, 755, 240, 756, 236, 644, 237" /><!--Flecha BTS-->
</map>

    <script  src="../js/imageMapResizer.min.js"></script>
    <script type="text/javascript">
        
                $('map').imageMapResize();
        
            </script>

来源：https://stackoverflow.com/questions/46188370/how-to-make-responsive-each-area-of-an-image-map

标签

html

image

responsive-design

imagemap