imagemapster不同颜色的区域

时间:2013-08-28 16:14:18

标签: javascript jquery css imagemapster areas

我想知道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>

这显然不是我想要的方式。如果有人可以帮助我,我会非常感激!

致以最诚挚的问候,

拉​​夫

1 个答案:

答案 0 :(得分:0)

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

  

数据maphilight = '{的 “则strokeColor”: “FF0000”下, “strokeWidth”:5 “填充颜色”: “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/