imagemapster различные области с разными цветами

Question

Мне было интересно, возможно ли следующее с 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> 

Это, очевидно, на самом деле не работает так, как я хочу. Я был бы очень благодарен, если бы кто-то мог мне помочь!

С наилучшими пожеланиями,

Раф

Answer 1

Различные цвета не должно быть никаких проблем. Используя «imagemapster», вам просто нужно добавить атрибут «data-maphilight».

данных 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> 

Fiddle: http://jsfiddle.net/Fiddel/gX3tH/