Question

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

例如，我在这里有肌肉图

<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个标签作为一个？

帮助，请=）

Answer 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

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

1 个答案: