イメージマップのハイライト状態をページリロードに保持する方法は？

Question

私のアプリでは、イメージマップがいくつかのポリシェイプに分割されています。各シェイプには、対応するチェックボックス（送信ボタン付きのフォームにあります）があり、一緒に選択されたイメージマップの領域に応じて表示された結果をフィルタリングできます。

dumbFormStateプラグインを使用して、フォームがサブミットされ、ページがリロードされた後もチェックボックスを維持しますが、イメージマップ内の選択されたシェイプが強調表示された状態を失います。

シェイプをページのリロード時のチェックボックスのように「チェック」状態にするにはどうすればよいですか？ここで

は私のjavascriptです：私は何かを残してきた場合いただきましブラウザ

<div class="map_container"> 

    <img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" /> 

    <map name="mainmap"> 
    <area id="north" data-areanum="area-42" 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" data-areanum="area-44" 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'" > 

    <area id="south" data-areanum="area-41" shape="poly" 
     coords="182,316,178,321,188,329,200,353,276,274,243,248" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 


    <area id="west" data-areanum="area-48" shape="poly" 
     coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" >   
    </map>    
</div> 

<div class="filter_options_container"> 
    <form accept-charset="UTF-8" action="" id="filter_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>  

    <fieldset class="filter_form_fieldset areas"> 
     <p class="area_check"><input id="area-41" name="areas[]" type="checkbox" value="41" /> 
     <label for="area-41"><p1>south</p1></label></p>  
     <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" /> 
     <label for="area-42"><p1>north</p1></label></p> 
     <p class="area_check"><input id="area-44" name="areas[]" type="checkbox" value="44" /> 
     <label for="area-44"><p1>east</p1></label></p> 
     <p class="area_check"><input id="area-48" name="areas[]" type="checkbox" value="48" /> 
     <label for="area-48"><p1>west</p1></label></p> 

    </fieldset> 

    <div class="filter_form_button"> 
     <p2><input type="submit" value="Show me"/></p2> 
    </div> 
</form></div> 

で生成

<script> 
    jQuery(function(){ // ensure dom is loaded first 
    jQuery('#filter_form').dumbFormState(); 
    }); 

    $(function() { 
    $('.map').maphilight(); 

    $('#north, #east, #south, #west').click(function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     var data = $this.mouseout().data('maphilight') || {}; 
     data.alwaysOn = !data.alwaysOn; 
     $this.data('maphilight', data).trigger('alwaysOn.maphilight'); 
    }); 
    }); 

    $(function() { 
    $('area').click(function(){ 
     var name = $(this).data("areanum"); 
     var $checkbox = $('#' + name); 
     $checkbox.attr('checked', !$checkbox.attr('checked')); 
    });  
    }); 
</script> 

index.html.erb

<div class="map_container"> 

    <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %> 

    <map name="mainmap"> 
    <area id="north" data-areanum="area-42" 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" data-areanum="area-44" 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'" > 


    <area id="south" data-areanum="area-41" shape="poly" 
     coords="182,316,178,321,188,329,200,353,276,274,243,248" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 


    <area id="west" data-areanum="area-48" shape="poly" 
     coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 
    </map>    
</div> 

<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="Show me"/></p2> 
    </div> 
    <% end %> 
</div> 

私の質問からcomme nt。

ご協力いただきありがとうございます。

Answer 1

データをシリアル化して、window.onbeforeunloadイベントのCookieまたはLocalStorageに保存することができます。 document.onloadでは、保存されているデータがある場合は、適用してから削除してください。