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

How can I make areas of an imagemap act like checkboxes?

本文关键字：一样 复选框 图像 何使 地图 区域      更新时间：2023-09-26

我是一个糟糕的新手程序员，几个月来一直在努力实现这一点！

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

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

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

我想让地图上的区域以与过滤器选项相同的方式进行操作。因此，如果用户单击地图上的北部区域，只会显示北部的地方，而且我希望用不同的图像（城镇北部区域的放大图像）替换城镇的整个图像。

过滤器复选框（使用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？

非常感谢您的帮助！

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

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

代码非常简单！

不过，我不确定你是否真的需要收音机按钮。

虽然我无法帮助您使用任何可能涉及的Ruby，但您可能会发现两个jQuery方法.trigger（）和.on（）很有用。

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

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

或者，在不使用onclick属性的情况下，

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

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

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

相关文章：