如何响应图像映射的每个区域

时间:2017-09-13 03:26:30

标签: html image responsive-design imagemap

我有这个图像地图,我正在尝试使每个选定区域响应...因为当改变屏幕的大小时,图像适应正确,但区域不适应新的大小的图片。在这里,您可以看到所选区域为蓝色。

选择蓝色区域 normal size 在这里我改变了屏幕的大小,但区域不再是图像 other size

<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>

0 个答案:

没有答案