Javascript 如何根据显示的结果更改div背景图像？

我有一个应用程序显示了一个场馆列表，每个场馆都属于一个区域。场馆可以根据所在区域进行过滤。我想把屏幕从中间分开，在左侧显示场馆部分，在右侧有一张“手绘”地图。如何根据显示的场馆更改右侧地图分区中显示的图像

我希望默认为显示所有区域的缩小地图，但当所有显示的场馆都有相同的区域id号时，我希望地图图像更改为该区域的放大详细地图

所以有点像这样：

如果所有正在显示的场馆区域_id=1，则显示此区域图像
或者如果区域_id=2，则显示该区域图像
否则，将显示另一个缩小的图像

我最终希望每个场馆在地图上都有自己的图标，绝对定位在地图分区内

---

我有大约2个月的编程经验，可能认为这需要用javascript或jquery（我对此一无所知）来完成，但不确定，非常感谢您的帮助

在元素上使用区号作为类，并在CSS中为每个类设置背景图像

<div class="area_id_1"></div>

---

我在Vincement partial html.erb文件中使用jQuery进行管理：

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script> 

document.getElementById（“场馆地图图标”）style.left=“px”；
document.getElementById（“场馆地图图标”）style.top=“px”；

---

我将iconleftpx:integer和icontoppx:integer字段添加到场馆表中，用于填充jQuery代码调用的绝对位置的顶部和左侧值。

感谢您的快速响应，不过我有点困惑，您的意思是所有部分都是元素吗？

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>