Mapster填充区域

Question

我使用mapster js显示图像中的某个部分。内部地区我也使用数据密钥和类。悬停工作完美，但我需要填写这些部分后，不仅加载与特定的颜色悬停。我尝试了一些例子，但没有工作。

$('.plan-img').mapster({ 
 
      stroke: true, 
 
      strokeWidth: 2, 
 
      configTimeout: 20000, 
 
      mapKey: 'data-key', 
 
      onClick: function(data){ 
 
       if (this.href && 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 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://trnky2.reklama.sexy/js/jquery.imagemapster.min.js"></script> 
 
<div class="floor-plans"> 
 

 
<div class="plan"> 
 
    <img src="http://trnky2.reklama.sexy/img/floor-1.jpg" usemap="#floor-1" class="plan-img" data-floor="1"> 
 
    <map id="floor-1" name="floor-1"> 
 

 
     <area shape="rect" data-key="sold" class="sold" alt="" title="" coords="580,78,771,274" href="#" target=""> 
 
     <area shape="rect" data-key="reserve" class="reserve" alt="" title="" coords="308,81,506,273" href="#" target=""> 
 

 
    </map> 
 
</div>

Answer 1

var map = $('.plan-img'), 

    render = new Array(); 

    render["free"] = { 
     fillColor: 'A7DC96', 
     strokeColor: 'A7DC96', 
    }; 

    render["sold"] = { 
     fillColor: 'ff7f7f', 
     strokeColor: 'ff7f7f', 
    }; 

    render["reserve"] = { 
     fillColor: 'ddde97', 
     strokeColor: 'ddde97', 
    }; 

map.mapster({   
    onConfigured: function() { 

     $(this).parent().parent().find("area").each(function(){ 

      var type = $(this).attr("data-key");     
      $(this).mapster('set',true,render[type]); 

     }) 
    }, 
    onClick: function (data) { 
     if (this.href && this.href !== '#') { 
      window.open(this.href, '_self'); 
     } 
    } 

});