Question

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

Answer 1

现在没有内置的方法来创建适用于一组独立区域的配置文件，但您可以通过一点点工作自己完成。这是一个有效的例子：

首先设置交叉引用：

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

然后，将配置文件映射到新对象，以便使用每个区域的“mapKey”轻松访问它们：

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'
    }, ...
    ]
);

如果您有很多重复的区域，这显然会是很多数据。从另一个角度来说，它的效率更高，标记更少。

imagemapster：为不同类别的区域渲染“不同”的样式

1 个答案: