javascript - 使 map 响应

Question

我目前正在渲染一个 Joomla 网站响应。但我在使用 SobiPro map 时遇到问题。我正在显示一张 map (背景 img)和点(一个链接 + img)在它上面的绝对位置，所以如果你缩小 map 的大小，它就不再适合了。

这是 html 和 css ->

<div id="system">
    <article class="item">
      <div class="content clearfix">
        <div id="plan-boutiques">
          <a href="#" id="repere-dia" style="" data-lightbox="width:600;type:iframe;">18</a>
          <!-- 31 links like this ^ -->
        </div>
      </div>
    </article>
</div>

CSS:

#plan-boutiques {
  background: url(../images/rom/niveau.png) no-repeat;
  position: relative;
  display: block;
  height: 374px;
  width: 685px;
  margin: 0 auto;
  z-index: 1;
}

并且像这样将一个 id 应用于每个点(总共 31 个):

a#repere-dia {
  left: 391px;
  top: 182px;
}

我已经尝试逐个像素地移动，但 30 个点不是正确的解决方案，因此我正在寻找一些 jQuery 或 Javascript 解决方案。

编辑

新问题:即使我缩小窗口，背景仍然居中。

Answer 1

在您的 CSS 中使用百分比定位而不是像素。

 a#repere-dia {
   left: 10.43%;
   top: 27.02%;
 }