我使用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>
答案 0 :(得分: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');
}
}
});