Question

我是一个蹩脚的新手程序员，并且一直在努力让这个工作好几个月！

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

主页面显示地图（使用油漆店的城镇的.png）并将其拆分为不同的区域。

该页面还有一些过滤器复选框，用于缩小按区域显示的结果，这些结果在.png地图上显示为引脚。所以如果我选择北方＆＃39;复选框仅显示城镇北部的位置。

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

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

所以我有工作过滤器复选框，并且imagemap正确地突出显示每个区域悬停，如何链接2？

感谢任何帮助，非常感谢！

Answer 1

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

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

代码非常简单！

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

Answer 2

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

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

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

或者，不使用onclick属性，

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

你需要玩选择器，因为我没有通过Ruby来解读它们。

希望指出你正确的方向。

如何使图像映射的区域像复选框一样？

2 个答案: