突出显示图像地图中的 maphilight 区域

Question

我有一个简单的 html 图像地图和一个带有状态的简单数组，我想在悬停一个区域时对所有组区域进行 maphilight，但现在 maphilight 仅悬停状态。

这是我的功能

$(function() { $('.map2').maphilight();}); </script>

和我的代码：

<div>
    <img class="map2" src="/1.png" usemap="#map1_Map">

    <map name="map1_Map">
<area shape="poly" alt="" coords="555,28, 564,32, 569,33, 565,36, 561,37, 564,44, 570,45, 598,41, 597,45, 569,71, 574,77, 579,81, 578,84, 574,81, 571,85, 577,92, 574,101, 572,104, 566,119, 566,127, 554,128, 561,133, 532,142, 510,156, 500,164, 493,184, 487,190, 469,182, 455,152, 455,142, 462,132,
459,132, 449,131, 452,124,
460,123, 447,115, 438,96, 428,87, 390,79, 403,75, 386,71, 394,64, 410,60, 411,55, 405,54, 402,51, 373,70, 369,73, 367,81, 361,86, 327,82, 328,70, 310,66, 310,64, 311,60, 301,57, 305,50, 314,46, 317,45, 320,40, 384,29, 428,39, 458,36, 475,32, 479,31, 491,27, 509,26" href="#">
<area shape="poly" alt="" coords="555,24, 556,25" href="#">
<area shape="poly" alt="" coords="454,32, 455,32, 456,32, 455,33" href="#">
<area shape="poly" alt="" coords="568,39, 569,40, 568,40" href="#">
<area shape="poly" alt="" coords="292,59, 287,55, 290,53" href="#">
<area shape="poly" alt="" coords="588,56, 587,57" href="#">
<area shape="poly" alt="" coords="288,67, 291,72, 275,73, 271,62, 286,65" href="#">
<area shape="poly" alt="" coords="306,71, 313,75, 302,75, 294,65" href="#">
<area shape="poly" alt="" coords="254,69, 246,78, 241,74, 243,70, 241,68" href="#">
<area shape="poly" alt="" coords="239,74, 236,76, 233,70" href="#">
<area shape="poly" alt="" coords="272,79, 266,76, 272,77" href="#">
<area shape="poly" alt="" coords="231,78, 233,84, 239,79, 244,87, 251,86, 256,82, 266,93, 238,98, 233,95, 226,92, 219,89, 207,86, 231,76" href="#">
<area shape="poly" alt="" coords="308,86, 300,80, 311,82" href="#">
<area shape="poly" alt="" coords="309,86, 300,81, 311,81" href="#">
<area shape="poly" alt="" coords="371,78, 371,79, 370,79" href="#">

当用户悬停一个ot maphilight所有这些区域时怎么办？

Answer 1

这是你的脚本

$(function() {
    $('.map2').maphilight();
        $(".hoverMap1").mouseover(function () {                
            var data = $(this).data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $(".hoverMap1").data('maphilight', data).trigger('alwaysOn.maphilight');
        });
});

并在每个区域添加 class .hoverMap1，如下所示：

<area id="s1" class="hoverMap1" shape="poly" alt="" coords="555,28, 564,32, 569,33, 565,36, 561,37, 564,44, 570,45, 598,41, 597,45, 569,71, 574,77, 579,81, 578,84, 574,81, 571,85, 577,92, 574,101, 572,104, 566,119, 566,127, 554,128, 561,133, 532,142, 510,156, 500,164, 493,184, 487,190, 469,182, 455,152, 455,142, 462,132,459,132, 449,131, 452,124,460,123, 447,115, 438,96, 428,87, 390,79, 403,75, 386,71, 394,64, 410,60, 411,55, 405,54, 402,51, 373,70, 369,73, 367,81, 361,86, 327,82, 328,70, 310,66, 310,64, 311,60, 301,57, 305,50, 314,46, 317,45, 320,40, 384,29, 428,39, 458,36, 475,32, 479,31, 491,27, 509,26" href="#">
<area id="s2" class="hoverMap1" shape="poly" alt="" coords="555,24, 556,25" href="#">
<area id="s3" class="hoverMap1" shape="poly" alt="" coords="454,32, 455,32, 456,32, 455,33" href="#">
<area id="s4" class="hoverMap1" shape="poly" alt="" coords="568,39, 569,40, 568,40" href="#">
<area id="s5" class="hoverMap1" shape="poly" alt="" coords="292,59, 287,55, 290,53" href="#">

突出显示图像地图中的 maphilight 区域

hilighting a maphilight areas in an Image map

jquery

area

maphilight