如何使图像地图的区域像复选框一样？答案

【问题标题】：How can I make areas of an imagemap act like checkboxes?如何使图像地图的区域像复选框一样？
【发布时间】：2012-02-04 05:15:23
【问题描述】：

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

我有一个显示城镇不同地点的应用程序。

主页显示一张地图（使用paintshop的城镇的.png）并将其分成不同的区域。

该页面还有一些过滤器复选框来缩小按区域显示的结果，这些结果在 .png 地图上显示为图钉。因此，如果我选择“北部”复选框，则只会显示城镇北部的地点。

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

过滤复选框（使用 jQuery UI 插件）

<script>  
  $(function() {
    $(".areas").buttonset();
  }); 
</script>

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>

    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
        <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p>
      <% end %>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  <% end %>
</div>

索引方法

def index
  if 
    @places = Place.with_area(params[:areas]).order("case plan when 'premium' then 1 else 0 end desc, average_rating DESC").all
  else
    @places = Place.all
  end
end

显示的结果呈现为部分：

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

Imagemap（使用 jquery maphighlight 插件）

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

所以我有有效的过滤器复选框，并且图像地图在每个区域悬停时正确突出显示，我如何链接 2？

非常感谢您的帮助！

【问题讨论】：

对我来说，Ruby 部分似乎无关紧要，客户端功能才是最重要的。您能否设置一个 JSFiddle，其中包含输出到浏览器的所有内容和一些示例图像？那我很乐意看看

标签： javascript ruby-on-rails user-interface checkbox imagemap

【解决方案1】：

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

http://jsfiddle.net/adaz/vUuJL/2/

代码非常简单！

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

【讨论】：

非常感谢您的回答，我仍在努力让它适应我已经拥有的东西，但它有很大帮助。再次感谢！
别担心，我很高兴能帮上忙！

【解决方案2】：

虽然我无法帮助您处理可能涉及的任何 Ruby，但您可能会发现 .trigger() 和 .on() 这两个 jQuery 方法很有帮助。

您可以为地图的每个区域添加一个 onclick 处理程序，当单击该处理程序时会触发其相应复选框上的单击事件。

onclick="$('#corresponding_checkbox').trigger('click')"

或者，不使用 onclick 属性，

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

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

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

【讨论】：