title: Mapster fill areas
body: <p>i use mapster js for show some section inside image. Inside areas i use data key and class also. Hover working perfec but i need fill these sections after load not only on hover with specific color. I try some examples but not working. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.plan-img').mapster({
              stroke: true,
              strokeWidth: 2,
              configTimeout: 20000,
              mapKey: 'data-key',
              onClick: function(data){
                  if (this.href &amp;&amp; this.href !== '#') {
                      window.open(this.href,'_self');
                  }
              },
              onConfigured:function() {
  
                  $(".floor-plans .mapster_el").parent().hide();
  
              },
       
              areas:[{
                  key: 'free',
                  fillColor: 'A7DC96',
                  strokeColor: 'A7DC96',
              },
                  {
                      key: 'sold',
                      fillColor: 'ff7f7f',
                      strokeColor: 'ff7f7f',
  
                  },
                  {
                      key: 'reserve',
                      fillColor: 'ddde97',
                      strokeColor: 'ddde97',
                  }
              ],
              fillOpacity: 0.3
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://trnky2.reklama.sexy/js/jquery.imagemapster.min.js"&gt;&lt;/script&gt;
  &lt;div class="floor-plans"&gt;
  
  &lt;div class="plan"&gt;
      &lt;img src="http://trnky2.reklama.sexy/img/floor-1.jpg" usemap="#floor-1" class="plan-img" data-floor="1"&gt;
      &lt;map id="floor-1" name="floor-1"&gt;
  
          &lt;area shape="rect" data-key="sold" class="sold" alt="" title="" coords="580,78,771,274" href="#" target=""&gt;
          &lt;area shape="rect" data-key="reserve" class="reserve" alt="" title="" coords="308,81,506,273" href="#" target=""&gt;
  
      &lt;/map&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>