在图像地图中突出显示地图亮点区域

Posted 2023-05-09

【中文标题】在图像地图中突出显示地图亮点区域

【英文标题】：hilighting a maphilight areas in an Image map

【发布时间】：2019-09-25 20:19:15

【问题描述】：

我有一个简单的 html 图像映射和一个带有状态的简单数组，我希望在一个区域悬停时映射所有组区域，但现在 maphilight 仅悬停状态。

这是我的功能

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

和我的代码：

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

    <map name="map1_Map">
<area shape="poly"  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"  coords="555,24, 556,25" href="#">
<area shape="poly"  coords="454,32, 455,32, 456,32, 455,33" href="#">
<area shape="poly"  coords="568,39, 569,40, 568,40" href="#">
<area shape="poly"  coords="292,59, 287,55, 290,53" href="#">
<area shape="poly"  coords="588,56, 587,57" href="#">
<area shape="poly"  coords="288,67, 291,72, 275,73, 271,62, 286,65" href="#">
<area shape="poly"  coords="306,71, 313,75, 302,75, 294,65" href="#">
<area shape="poly"  coords="254,69, 246,78, 241,74, 243,70, 241,68" href="#">
<area shape="poly"  coords="239,74, 236,76, 233,70" href="#">
<area shape="poly"  coords="272,79, 266,76, 272,77" href="#">
<area shape="poly"  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"  coords="308,86, 300,80, 311,82" href="#">
<area shape="poly"  coords="309,86, 300,81, 311,81" href="#">
<area shape="poly"  coords="371,78, 371,79, 370,79" href="#">

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

【参考方案1】：

这是你的脚本

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

并像这样在每个区域添加 .hoverMap1 类：

<area id="s1" class="hoverMap1" shape="poly"  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"  coords="555,24, 556,25" href="#">
<area id="s3" class="hoverMap1" shape="poly"  coords="454,32, 455,32, 456,32, 455,33" href="#">
<area id="s4" class="hoverMap1" shape="poly"  coords="568,39, 569,40, 568,40" href="#">
<area id="s5" class="hoverMap1" shape="poly"  coords="292,59, 287,55, 290,53" href="#">