imagemapster：为不同类型的区域渲染“不同”风格

Question

是否可以在imagemapster中以不同风格设计不同的区域？例如：当我有一个房子的计划时，用户可以点击不同的房间：客厅，卧室，浴室......。任何选定的客厅应呈现红色，任何选定的卧室应选择蓝色... 谢谢 库尔特

Answer 1

现在没有内置的方式来创建适用于一组独立的配置文件地区，但你可以自己做一点工作。这里有一个工作示例：

http://jsfiddle.net/jamietre/RyScW/

首先建立一个交叉引用：

var profiles = [ 
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA", 
    options: { 
     fillColor: '0000ff' 
    } 
}, 
{ 
    areas: "UT,CO,AZ,NM", 
    options: { 
     fillColor: '00ff00' 
    } 
} 
]; 

然后，映射配置文件到一个新的对象可以很容易地使用“映射键”访问它们每个区域：

var optionsXref = {}; 

$.each(profiles,function(i,e) { 
    var areas = e.areas.split(','); 

    $.each(areas,function(j,key) { 
     optionsXref[key]=e.options; 
    });   
}); 

这个刚创建的简单结构转换为对象，看起来像这样：

{ "ME": { reference to first option group }, 
    "VT": { reference to first option group }, 
    ... 
    "UT": { reference to 2nd option group }, 
    .. 
} 

最后，拦截“点击”，并选择使用特定选项手动面积：

image.mapster({ 
    mapKey: 'data-state', 
    onClick: function(e) { 
     if (e.selected) { 

      // the 4th parameter is the options that area mapped to that area. 

      image.mapster('set',true,e.key, optionsXref[e.key]);  
      return false; 
     }    
    } 
}); 

的return false原因ImageMapster取消其自己的点击操作。而已。

而且设备的完整性 - 你可能只是这样做老式的方式和分配的选项，每个区域：

直接的方式做，这是通过将特定的信息对每个区域前面，如

$('img').mapster({ 
    areas: [{ 
     mapKey: 'living-room-1', 
     fillColor: 'ff0000' 
    }, 
    { 
     mapKey: 'living-room-2', 
     fillColor: 'ff0000' 
    }, ... 
    ] 
); 

如果你有很多区域，并且有很多重复，这显然是很多数据。以另一种方式做它更有效率并且少得多。