Javascript 如何在鼠标上方突出显示imagemap的部分？

我需要显示一个大约有70个区域的图像地图。鼠标光标当前所在的imagemap区域应以特定颜色高亮显示

---

这可能吗？如果可能，如何实现？

是的，这是可能的。我使用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 hover是一个div，其中包含所有要放在地图顶部的图像。如果需要，可以定位它们，或者使图像与图像贴图大小相同，但具有透明度

下面是一些html：

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

<div id="container">
        <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </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" alt="Sunset Country" />
    <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" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <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" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>

<div id="container">
        <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </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" alt="Sunset Country" />
    <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" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <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" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>

---

我不知道是否有一种很酷的方法可以做到这一点，但是你可以将你的图片作为块元素的背景图像，用一张透明图片和你的图像贴图覆盖它，然后将鼠标悬停事件中的这张透明图片替换为该区域高亮显示的图片

---

缺点是，在实际生产中使用后，您需要70张突出显示区域的图像，我想这就是答案：

---

使用此功能，需要几行代码才能为任何imagemap实现该功能

我尝试使用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：（几乎相同，不需要跨图像）

$（函数（）{
$（'.map'）.maphilight（）；
});

谢谢！因为我可以生成这些图像，所以实际上并没有太多的工作。我一直在使用您的答案创建一个图像地图，在鼠标上方突出显示各个部分，但效果不太好。对我来说，正确的图像确实出现在我鼠标悬停的时候，但是它们直接出现在我悬停的原始图像的下方。因此，使用您的代码作为参考点，如果我将鼠标移到

/images/trans.gif

图像的部分上，所有正确的图像都会显示在页面上该图像的下方，而不是显示为图像本身（鼠标在其上的图像）正在更改。我希望你能有一些建议/想法？哦，我想我找到了一些不错的东西，可以帮我完成这项工作：更新链接我们可以让亮点总是出现在地图的某些区域吗？我的意思是没有悬停？链接死了-有新的链接吗？如果有人在寻找那个插件，请检查这个链接-

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