groupBy function in maphilight jquery plugin

Question

Does anyone know how to get the groupBy function to work in the maphighlight plugin? I want to be able to have a group of countries on a map all highlight no matter which country in the group you mouseover. I cannot get even one to work. The documentation that I have been able to find is pretty sparse.

I have added the following to each map area in the group of countries I want in the group:

href="#" class="no-hand centralasia" alt="Russia" data-maphilight='{"groupBy":".centralasia"}' onmouseover="MM_showHideLayers('Russia','','show')" onmouseout="MM_showHideLayers('Russia','','hide')">

I am not sure about this bit:

data-maphilight='{"groupBy":".centralasia"}'

I am only using the defaults in the head as I am not sure what I am supposed to add there, if anything. I have also loaded the metadata plugin as well.

<script>$(function() {
    $('.map').maphilight({fade: false});
});

$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.3,
stroke: false,
strokeColor: 'E77200',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: ("philippines",true)
}

</script>

All help is very much appreciated as I really need to get this working ASAP.

Cheers everyone.

Dave

Answer 1

$.fn.maphilight.defaults = {
   groupBy: 'rel'
}

you have to give an attribute as the string. and then you can group all using a common value

ex:-

<map>
<area rel="sri lanka" ....... />
<area rel="sri lanka" ....... />
<area rel="sri lanka" ....... />
<area rel="usa" ....... />
<area rel="japan" ....... />
<area rel="japan" ....... />
</map>

so which has the same "rel" value will be grouped. hope this will help you.