Comment rendre responsive chaque zone d'une carte d'image

Question

J'ai cette carte d'image et j'essaye le chemin pour rendre chaque secteur choisi sensible ... parce que en changeant la taille de l'écran, l'image s'adapte correctement, mais le les zones ne s'adaptent pas à la nouvelle taille de l'image. Ici vous pouvez voir la zone sélectionnée en bleu.

ZONE BLEUE EST SELECTIONNE ICI CHANGER LA TAILLE DE L'ÉCRAN MAIS LA ZONE DONT SUIVRE L'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>

Answer 1

Pour une image réactive vous Maps besoin d'utiliser un plugin:

https://github.com/stowball/jQuery-rwdImageMaps (plus maintenu)

Ou

https://github.com/davidjbradshaw/imagemap-resizer

Aucun comprendre les principaux navigateurs pourcentage coordonnées correctement, et tout pourcentage interpréter les coordonnées sous forme de coordonnées de pixels. http://www.howtocreate.co.uk/tutorials/html/imagemaps

Et aussi cette page pour tester si les navigateurs mettent en œuvre

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html