图像映射器属性重复

时间:2016-10-26 22:03:59

标签: javascript jquery imagemapster

我使用图像映射器来映射图像。当部分区域被cliked然后另一个映射图像来。所以我使用许多图像和每个图像我需要重复mapster属性。我尝试某种方式但然后onclick功能和工具提示不工作。这是我的jquery为两个图像`

        $('#man').mapster({
            fillOpacity: 0.5,
            mapKey: 'alt',
            fillColor: "000000",
            listKey: 'alt',
            scaleMap: false,
            stroke: true,          
            singleSelect: true,
            toolTipClose: ["tooltip-click", "area-click", "area-mouseout"],
            showToolTip: true,
            onClick: function (e) {
                if (e.key === 'leg') {
                    $('#MaleLegDIV').show();
                    $('#DefaultMaleDIV').hide();
                }
            },
            areas: [
            {
                key: "leg",
                toolTip: 'LEG'
            }
            ]
        });
        $('#manLeg').mapster({
            fillOpacity: 0.5,
            mapKey: 'alt',
            fillColor: "000000",
            listKey: 'alt',
            scaleMap: false,
            stroke: true,           
            strokeColor: "3320FF",
            singleSelect: true,
            toolTipClose: ["tooltip-click", "area-click", "area-mouseout"],
            showToolTip: true, 
            areas: [
            {
                key: "toes",
                toolTip: 'TOES'
            },
            ]
        });
    });
</script>`

正如你所看到的,每个图像重复的是mapster属性。所以有任何方式我只是导入属性。所以很多行不需要写。 任何帮助都是提前感谢和感谢。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。我的解决方案是:

 var options =
               {
                   fillOpacity: 0.5,
                   mapKey: 'alt',
                   fillColor: "000000",
                   listKey: 'alt',
                   scaleMap: false,
                   stroke: true, 
                   singleSelect: true,
                   toolTipClose: ["area-mouseout"],
                   showToolTip: true,
                   render_highlight: {
                       fade: false
                   }
               };

           $('#man').mapster($.extend({}, options,{

               onClick: function (e) {
                   if (e.key === 'leg') {
                       $('#MaleLegDIV').show();
                       $('#DefaultMaleDIV').hide();
                   }
               },
               areas: [
               {
                   key: "leg",
                   toolTip: 'LEG'
               },
               ]

           }));