Jquery HTML页面中的图像映射未提供响应输出

我试图在html页面中显示一个图像，在该图像中我有6个圆圈，所有6个圆圈都是我想要的，可以点击

我已经实现了这个功能，但它是静态的。 这意味着，每当我在手机中查看图像时，所有可点击的圆圈都不在正确的位置

如何使图像地图具有响应性

下面是我正在使用的代码

<div>

<img usemap="#planetmap" width="588px" height="471px"   style="display: block;margin: 0 auto;" src = "domains.png";>

<map name="planetmap">
  <area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" />
  <area shape="circle" coords="160,165,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="490,166,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="162,358,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="490,358,66" href="" target="_blank" alt="" />
  <area shape="circle" coords="327,451,66" href="" target="_blank" alt="" />
</map>
<div>


</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min"></script>
<script>    

    $(document).ready(function() {
        $('map').imageMapResize();
    });
</script>

---

当我试图在网页上做出响应时，我所做的是两件事中的一件。使用“媒体查询”或b。使用前端CSS框架，如“Bootstrap”。就我个人而言，我更喜欢后者

下面是一个媒体查询的示例，当满足某个条件时，该查询将减小指定图像的大小CSS文件中的内容：

@media (min-width: 700px)
{
    .map { width: 400px; height: 400px; }
}

现在，如果设备的宽度满足条件，那么指定的css代码将应用于.map元素

---

这是一个非常基本的例子，但我认为它会让你在正确的轨道上开始。您可以修改媒体查询以更改地图的尺寸以适应不同的屏幕大小。有关更多详细信息，请参见此处：

此链接真的很好吗？jquery.rwdimageaps.min