4

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

cpx
  • 17,009
  • 20
  • 87
  • 142
Dave Filchak
  • 51
  • 1
  • 4

2 Answers2

9
$.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.

Jerad Rutnam
  • 1,536
  • 1
  • 14
  • 29
0

Just put the alt tags in map area like what "ehird" suggested first.

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

Then call the groupBy...

$('.map').maphilight({fade: false, groupBy: 'alt'});
Mimi
  • 1