표시되는 레코드에 따라 이미지와 JS를 어떻게 변경합니까?

Question

나는 각 장소가 한 지역에 속하며 한 지역에는 많은 장소가있는 장소와 지역의 테이블을 가지고있다.

경기장 인덱스 페이지 파셜 모든 장소 기록을 표시하고, I는 자신들이 어떤 영역에 의해 나타낸 장소를 필터링하기위한 체크 박스 세트를 갖는다.

I 또한 DIV (map_container)을 가지고을 보여주는 화면 오른쪽에있는 모든 영역의 .png 이미지를 매핑합니다. 개최지 사용하여 절대 위치가지도 상에 위치하는 아이콘이 있습니다

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

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

나는에 따라지도 이미지를 변경할 수 있도록하고 싶습니다

무엇 결과가 표시되고 새 이미지와 일치하도록 아이콘의 좌표를 변경하므로 북쪽의 모든 장소가 표시되면지도 div는 북쪽의 자세한지도 이미지를 표시합니다.

표시되는 모든 경기장의 area_id가 동일한 지 확인하고지도 div에 다른지도 이미지를 표시하는 방법은 무엇입니까? 따라서 모든 장소의 area_id가 1이면 map1.png를 표시하거나 모두 area_id가 2 인 경우 map2.png 등을 표시하고 JavaScript를 변경하여 venue.iconleftpx2 및 venue.icontoppx2의 위쪽 및 왼쪽 값을 가져옵니다 아직 존재하지 않음) 아이콘이 새로운 맵 이미지와 일치하도록 재배치됩니다.

도움을 주셔서 감사합니다.

Answer 1

나는 장소 부분 html.erb 파일에 jQuery를의 비트와 함께이 관리 : 내가 iconleftpx을 추가

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

: 정수 콘텐츠 래퍼의 영역과 같은 클래스 이름을 확인 및 icontoppx : jQuery 코드에서 호출하는 절대 위치 지정을위한 위쪽 및 왼쪽 값을 채우는 장소 테이블에 대한 정수 필드.

Answer 2

CSS 배경을 사용하십시오.

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

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