如何在鼠标悬停时突出显示部分图像映射？

Question

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

这是可能的,如果可以,怎么样？

Answer 1

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

使用它,需要几行代码才能为任何imagemap实现该功能.

Answer 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" 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>

Answer 3

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

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