HTML <area> - how to connect area tags

Question

How to make the script interpret two different area tags as one?

For example, I have a muscles map here

FIDDLE

<img src="http://www.ise-dvp.narod.ru/atletics/images/man2.gif" class="atlas" alt="muscles" usemap="#Navigation">

        <map id="Navigation" name="Navigation">

  <area shape="poly" coords="88,265,74,266,65,257,57,226,64,199,75,182,87,181,102,198,106,214,100,240,97,251,86,261,80,263,85,262" href="#"  alt="muscle1">
  <area shape="poly" coords="123,269,108,237,108,208,114,196,126,183,139,181,145,194,152,218,154,233,152,254,146,272,139,279,120,275,121,267" href="#"  alt="muscle2">

        </map>

$(document).ready(function ()
        {
            $('.atlas').maphilight();
        });

Using maphilight.js to select areas on mouseover. I need to select thigh muscles (on both legs), but it only selects one. I have the same problem with other muscles. I want to select them both at the same time on mouseover.

Is it possible to unite 2 area tags or to make the maphilight.js select 2 tags as one?

Help, please=)

Answer 1

You need to add some attribute to your area tags and add it to the default function options, for example:

<area shape="poly" coords="88,265,74,266,65,257,57,226,64,199,75,182,87,181,102,198,106,214,100,240,97,251,86,261,80,263,85,262" href="#"  alt="muscle1" group="thigh">
<area shape="poly" coords="123,269,108,237,108,208,114,196,126,183,139,181,145,194,152,218,154,233,152,254,146,272,139,279,120,275,121,267" href="#"  alt="muscle2" group="thigh">

JS:

$.fn.maphilight.defaults = {
    ...
    groupBy: 'group',
    ....

Attribute group="thigh" is the same for them so they both will be highlighed on hover.

See fiddle