imagemapster 不同区域的不同颜色答案

【问题标题】：imagemapster different areas with different colorsimagemapster 不同区域的不同颜色
【发布时间】：2013-08-31 20:04:33
【问题描述】：

我想知道 imagemapster 是否可以实现以下操作：我需要区域 1 和区域 2。当我悬停其中一个时，它们都必须突出显示，但颜色不同，例如，当我悬停其中一个时，区域 1 是蓝色和绿色，而区域 2 在悬停时是黄色和红色。

这是我迄今为止尝试过的：

 <script type="text/javascript">
    $(document).ready(function ()
    {
    $('#Landkarte').mapster({
    fillOpacity:0.5,
    mapKey: 'data-group',
    areas : [
    {key : 'keyone',fillColor: 'FF0000',fillOpacity : 0.5},
    {key : 'keytwo',fillColor: 'FFFF00',fillOpacity : 0.5}, 
    });
    });
 </script>

还有我的 HTML

   <area data-group="keyone,keytwo" href="#" coords="117,65,370,89" shape="rect"></area>
   <area data-group="keyone" href="#" coords="117,65,370,89" shape="rect"></area>

这显然不能按我想要的方式工作。如果有人可以帮助我，我将非常感激！

最好的问候，

拉夫

【问题讨论】：

你有一个语法错误：你没有关闭“areas”数组。

标签： javascript jquery css imagemapster areas

【解决方案1】：

不同的颜色应该没问题。使用“imagemapster”你只需要添加一个“data-maphilight”属性。

data-maphilight='{"strokeColor":"FF0000","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'

<map name="map_dummy" id="map_dummy">
    <area shape="poly" coords="226,245,334,335,434,345,454,317,308,194" href="http://www.google.de" alt="Object"  data-maphilight='{"strokeColor":"FF0000","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'>
    <area shape="poly" coords="9,566,51,509,171,584,306,582,406,670,386,687,174,689" href="#" alt="Subject"  data-maphilight='{"strokeColor":"FFFF00","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'>
</map>

小提琴： http://jsfiddle.net/Fiddel/gX3tH/

【讨论】：

data-maphilight 用于 maphilight 而不是 imagemapster