이미지 맵의 각 영역을 반응시키는 방법

Question

나는이 이미지 맵을 가지고 있으며 각 선택된 영역을 반응 적으로 만드는 방법을 찾고 있습니다 ... 왜냐하면 화면의 크기를 변경할 때 이미지가 올바르게 적용되기 때문에 영역은 새로운 크기의 이미지에 적용되지 않습니다. 여기에서 파란색으로 선택된 영역을 볼 수 있습니다.

BLUE AREA가 여기 선택되어 나는 화면의 크기를 변경하지만이 지역은 응답 이미지

<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

것을 매핑 이미지를 따르 DONT 플러그인을 사용해야합니다.

https://github.com/stowball/jQuery-rwdImageMaps 10

또는

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

없음 주요 브라우저

는 비율이 정확하게 좌표를 이해하고, 모든 해석 비율은 픽셀 좌표로 좌표 (더 이상 유지하지 않습니다). 브라우저

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