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

Question

I'm a crappy novice programmer and have been struggling to get this working for months!

I have an app which shows different places in a town.

The main page displays a map (.png of the town using paintshop) and its split into different areas.

The page also has some filter checkboxes to narrow down the results shown by area, which are displayed as pins on the .png map. So if I select the 'North' checkbox only the places in the North of the town are displayed.

I would like to get the areas of the map to act in the same way as the filter options. So that if the user clicks the North area on the map only the places in the North are shown and ALSO I would like the whole image of the town to be replaced with a differant image (a more zoomed in image of the Northern area of the town).

Filter checkboxes (Using the jQuery UI plugin)

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

Index method

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

The results shown are rendered as partials:

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

Imagemap (Using the jquery maphighlight plugin)

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

So I have working filter checkboxes and the imagemap correctly highlights on each area hover, how can I link the 2?

Thanks for any help its very much appreciated!

Answer 1

I've prepared a simple demo of what you can do:

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

The code is pretty straightforward!

I'm not sure if you really need radio buttons though.