HTML <area> - 如何连接区域标签答案

【问题标题】：HTML <area> - how to connect area tagsHTML <area> - 如何连接区域标签
【发布时间】：2013-01-17 23:31:34
【问题描述】：

如何让脚本将两个不同的区域标签解释为一个？

比如我这里有一张肌肉图

<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();
        });

使用 maphilight.js 在鼠标悬停时选择区域。我需要选择大腿肌肉（两条腿），但它只选择一个。我的其他肌肉也有同样的问题。我想在鼠标悬停时同时选择它们。

是否可以合并 2 个区域标签或让 maphilight.js 选择 2 个标签作为一个标签？

请帮忙=)

【问题讨论】：

标签： jquery imagemap area areas

【解决方案1】：

您需要在区域标签中添加一些属性，并将其添加到默认功能选项中，例如：

<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',
    ....

group="thigh" 属性对它们来说是相同的，所以它们都会在悬停时高亮显示。

见fiddle

【讨论】：