How can I change an image and JS depending on what records are being displayed?

I have a table of venues and areas where each venue belongs to an area and an area has many venues.

The venues index page is displaying all the venue records as partials and I have a set of checkboxes to filter the venues shown by what area they are in.

I also have a div (map_container) which shows a map .png image of all the areas on the right of the screen. A venue has an icon placed on the map by absolute positioning using:

<script>
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>

venue index.html.erb

<div class="map_container">
</div>

<div class="filter_options_container">
  <form class="form">          
    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
      <%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" 开发者_开发知识库%>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label>
      <% end %>
    </fieldset>

    <div class="form_filter_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  </form>
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>      
  <div class="clearall"></div>
</div>

<div class="clearall"></div>

I would like to be able to change the map image depending on what results are being displayed and alter the coords of the icon to match the new image, so if all the venues in the north are being displayed then the map div displays a more detailed map image of the north.

How would it be possible to check whether all the venues being displayed have the same area_id and if they do display a different map image in the map div? So if all venues have area_id of 1 then display map1.png or if they all have an area_id of 2 then display map2.png etc and also change the JavaScript to take the top and left values from say venue.iconleftpx2 and venue.icontoppx2 (which dont exist yet) so that the icon is repositioned to match with the new map image.

Thanks for any help, its much appreciated!

---

Use CSS backgrounds. Make your class names the same as the areas on your content wrapper:

.area1 {
     background-image:url(../images/pictureA.png)
}

.area2 {
     background-image:url(../images/pictureB.png)
}

---

I managed this with this bit of jQuery in the venue partial html.erb file:

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script> 

I added iconleftpx:integer and icontoppx:integer fields to the venue table which populate the top and left values for the absolute positioning called by the jQuery code.