imagemapster different areas with different colors

Question

I was wondering if the following is possible with imagemapster: i need area 1 and area 2. When i hover one of them both have to highlight but in different colors, for example area 1 is blue and green when i hover one of them and area 2 is yellow and red on hover.

This is what i tried so far:

 <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>

And my 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>

This obviously doesn't really work the way I want. I would be very greatful if someone could help me out!

Best regards,

Raph

Answer 1

Different colors should be no problem. Using "imagemapster" you just need to add a "data-maphilight" attribute.

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>

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