如何在鼠标悬停时突出显示图像地图的某些部分？

Posted 2023-05-08

技术标签:

【中文标题】如何在鼠标悬停时突出显示图像地图的某些部分？【英文标题】：How do I highlight parts of an imagemap on mouseover? 【发布时间】：2010-11-15 02:56:13 【问题描述】：

我需要显示一个包含大约 70 个区域的图像地图。鼠标光标当前所在的图像映射区域应该以某种颜色突出显示。

这可能吗？如果可以，怎么做？

【问题讨论】：

哦，我想我找到了适合我的好东西：plugins.jquery.com/project/maphilight 更新链接davidlynch.org/projects/maphilight/docs 【参考方案1】：

在生产中实际使用它之后，我会说这就是答案：http://plugins.jquery.com/project/maphilight

使用它需要几行代码来为任何图像映射实现该功能。

【讨论】：

我们能否让高亮始终出现在地图的某些区域？我的意思是没有悬停？链接已失效 - 有新链接吗？如果有人正在寻找该插件，请查看此链接 - github.com/kemayo/maphilight【参考方案2】：

是的，这是可能的。我已经用 jquery 和图像映射区域 mouseenter / mouseleave 事件做了同样的事情，但不是 70 个区域。这对你来说只会做更多的工作。您可以考虑在鼠标悬停时通过 ajax 调用加载图像，或者使用精灵和定位，这样您就不需要将 70 个图像加载到 dom 中。

jquery:

$(document).ready(function() 

    $(".map-areas area").mouseenter(function() 
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    ).mouseleave(function() 
        $(".map-hovers img").hide();
        return false;
    );

);

.map-hovers 是一个 div，其中包含您想要放置在地图顶部的所有图像。如有必要，您可以定位它们，或者使图像与图像贴图大小相同，但具有透明度。

还有一些html：

注意：注意图像地图区域索引如何与 map-hovers 容器中的 img 索引对齐？另外：图像映射必须指向一个透明的 gif，并将背景图像设置为您要显示的实际图像。这是一个跨浏览器的事情 - 不记得确切的原因。

<div id="container">
        <img src="/images/trans.gif"   class="map-trans"  usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png"  />
            <img src="/images/map/north-of-superior.png"  />
            <img src="/images/map/algomas-country.png"  />
            <img src="/images/map/ontarios-wilderness.png"  />
            <img src="/images/map/rainbow-country.png"  />
            <img src="/images/map/ontarios-near-north.png"  />
            <img src="/images/map/muskoka.png"  />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0"  />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1"  />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2"  />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3"  />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4"  />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5"  />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6"  />
    </map>

【讨论】：

谢谢！因为我可以生成这些图像，所以实际上并没有那么多工作。我一直在使用您的答案来创建一个图像地图，突出显示鼠标悬停时的各个部分，但它的工作并不完全正确。对我来说发生的事情是，当我将鼠标悬停时，正确的图像确实出现了，但它们直接出现在我悬停的原始图像下方。因此，使用您的代码作为参考点，如果我将鼠标移到 /images/trans.gif 图像的某些部分上，所有正确的图像都会出现在页面上的下方，而不是像图像本身一样出现（鼠标悬停的那个）正在改变。我希望你能有一些建议/想法？【参考方案3】：

1.Step:Add jquery.min.js
2.Step:Add jquery.maphilight.js
3.Step:Add the $('.map').maphilight();

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script type="text/javascript">
  $(function() 
    $('.map').maphilight();
  );
</script>

<body>
  <div>
    <div class="imginfo"><span></span></div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" usemap="#image-map" class="map">

    <map name="image-map">
    <area target=""  title="" href="" coords="0,0,144,146" shape="rect">
    <area target=""  title="" href="" coords="152,1,299,146" shape="rect">
    <area target=""  title="" href="" coords="2,149,143,299" shape="rect">
    <area target=""  title="" href="" coords="152,152,300,299" shape="rect">
</map>
  </div>

</body>

</html>

【讨论】：

【参考方案4】：

我尝试使用 ScottE 的解决方案，但不幸的是，这意味着将目标图像添加为身体背景。

我的解决方案与他的非常接近，但使用了正确的图像

jQuery:

$(document).ready(function() 

    $(".map-areas area").mouseenter(function() 
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    );
    $(".map-hovers img").mouseleave(function() 
        $(".map-hovers img").hide();
        return false;
    );

);

这里的关键概念是，一旦您进入地图区域，就会显示地图悬停图像，然后该图像将成为鼠标下的活动图层 - 只需检测您何时离开该图像即可顺利完成。

HTML：（几乎一样，不需要trans image）

<div id="container">
        <img src="/images/full-map.png"   class="map-trans"  usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png"  />
            <img src="/images/map/north-of-superior.png"  />
            <img src="/images/map/algomas-country.png"  />
            <img src="/images/map/ontarios-wilderness.png"  />
            <img src="/images/map/rainbow-country.png"  />
            <img src="/images/map/ontarios-near-north.png"  />
            <img src="/images/map/muskoka.png"  />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0"  />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1"  />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2"  />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3"  />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4"  />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5"  />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6"  />
    </map>

【讨论】：

【参考方案5】：

我不知道是否有一种很酷的方法，但是您可以将您的图片作为块元素的背景图片，用透明图片和您的图片映射覆盖它，然后在鼠标悬停时替换此透明图片带有突出显示该区域的图片的事件。

不利的一面是，您需要 70 张突出显示区域的图像

【讨论】：

以上是关于如何在鼠标悬停时突出显示图像地图的某些部分？的主要内容，如果未能解决你的问题，请参考以下文章

在鼠标悬停时突出显示L.divIcon或在Leaflet地图中以编程方式突出显示

如何在鼠标悬停 QML 上突出显示图像

如何绘制菜单列表悬停有效的图像地图？

悬停在特定国家/地区时，在空白世界地图上突出显示国旗

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

悬停时更改 SVG 填充和文本突出显示颜色