Javascript 如何使imagemap的区域像复选框一样工作？

我是一个蹩脚的程序员新手，几个月来一直在努力让它工作

我有一个应用程序，可以显示一个城镇的不同地方

主页上显示了一张地图（.png，使用paintshop显示该城镇），并将其划分为不同的区域

该页面还具有一些过滤器复选框，用于缩小按区域显示的结果的范围，这些结果在.png地图上显示为pin。因此，如果我选中“北”复选框，则仅显示城镇北部的位置

我想让地图的区域以与过滤器选项相同的方式工作。因此，如果用户单击地图上的北部区域，则仅显示北部的位置，并且我希望将整个城镇的图像替换为不同的图像（城镇北部区域的放大图像）

筛选复选框（使用jQuery UI插件）

显示的结果以部分形式呈现：

<%= render :partial => 'place', :collection => @places %>

'place'，：collection=>@places%>

Imagemap（使用jquery maphighlight插件）

$（函数（）{
$（'.map'）.maphilight（）；
});
“450”、：height=>“450”、：class=>“map”、：usemap=>“#mainmap”、：alt=>”）%>

因此，我有工作过滤器复选框和图像地图正确高亮显示在每个区域悬停，我如何才能链接2

---

谢谢你的帮助，非常感谢

虽然我无法帮助您了解可能涉及的任何Ruby，但您可能会发现这两种jQuery方法非常有用

您可以向映射的每个区域添加onclick处理程序，单击该处理程序会触发对应复选框上的单击事件

onclick=“$（'#对应的_复选框”）.trigger（'click'）”

或者，不使用onclick属性

$('#east').on('click', function() {
    $('#east_checkbox').trigger('click');
});

你需要使用选择器，因为我还没有通过Ruby来破译它们

---

希望这能为您指明正确的方向。

我准备了一个简单的演示，演示您可以做什么：

代码非常简单

---

不过，我不确定您是否真的需要单选按钮。

对我来说，Ruby部分似乎无关紧要，客户端功能才是最重要的。您可以设置一个JSFIDLE，其中包含输出到浏览器的所有内容和一些示例图像吗？我很乐意看一看，非常感谢你的回答，我仍在努力使它与我已经拥有的东西相适应，但它很有帮助。再次感谢！别担心，伙计，我很高兴能帮上忙！

<%= render :partial => 'place', :collection => @places %>

<script> 
 $(function() {
    $('.map').maphilight();
  });
</script>

<div class="map_container">

  <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %>

  <map name="mainmap">
    <area id="north" shape="poly" 
      coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="east" shape="poly" 
      coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >
  </map>              
</div>

$('#east').on('click', function() {
    $('#east_checkbox').trigger('click');
});