0

我有这样的代码：

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('img[usemap]').maphilight();

        $('area').on('click', function(e){
            $a = $(this);
            e.preventDefault();
            $('area').each(function(){
                var d = $(this).data('maphilight') || {};
                if(d.alwaysOn == true){
                    d.alwaysOn = false;  
                }
            });
            var data = $a.mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            console.log(data);
            $a.data('maphilight', data).trigger('alwaysOn.maphilight');
        });

    });
</script>
</head>
<body>


<img src="karte.gif" width="464" height="320" border="0" usemap="#karte">

<map name="karte">
    <area shape="poly" coords="141,73,140,25,156,24,161,17,165,13,171,12,173,20,170,42,205,63,201,75,193,85,184,90,168,82,157,76" href=""  rel="area1 - jajaja!">
    <area shape="poly" coords="207,65,202,78,192,90,195,94,202,95,208,97,208,105,210,112,212,118,219,123,224,124,228,128,249,131,255,132,257,138,268,136,274,133,282,133,287,132,297,127,298,113,298,104,309,94,309,83,303,74,296,67,280,65,276,76,269,60,247,58,231,64,220,68,216,70" href="" rel="area2 - jajaja!">
    <area shape="poly" coords="139,76,150,77,161,80,170,85,178,89,184,93,191,91,194,96,205,97,207,103,208,114,211,122,219,124,225,127,224,134,219,132,213,132,206,132,199,135,194,142,159,140,137,131,126,115,121,96,129,82" href="" rel="area3 - jajaja!">
    <area shape="poly" coords="197,141,207,135,214,134,221,136,227,133,228,129,233,132,244,132,251,134,253,138,258,140,265,140,270,138,277,135,283,135,279,141,279,155,282,170,285,177,257,179,252,188,244,193,241,190,231,193,229,190,227,195,220,199,214,207,211,208,198,199,193,184,196,162,202,153" href="" rel="area4 - jajaja!">
    <area shape="poly" coords="207,209,208,222,213,233,219,242,226,244,230,252,236,260,244,261,242,268,223,263,180,304,158,298,139,289,129,281,134,274,115,248,117,239,141,230,159,216,169,204,193,202" href="" rel="area5 - jajaja!">
    <area shape="poly" coords="245,267,247,260,236,257,231,248,227,241,218,236,212,225,210,216,211,210,218,205,222,200,227,197,232,195,238,194,244,195,250,192,255,188,258,181,270,181,285,179,293,194,288,219,294,231,293,236,294,239,292,245,295,251,291,257,291,264,271,276" href=""  rel="area6 - jajaja!">
    <area shape="poly" coords="293,261,297,252,294,244,296,237,297,228,290,219,295,197,314,194,339,214,335,231,338,244,327,255,313,251" href=""  rel="area6 - jajaja!">
</map>

</body>
</html>

它工作正常。当我悬停图像地图时，该区域会突出显示，当我单击图像地图时，突出显示效果会切换。现在我正在寻找一种解决方案，通过单击图像地图来显示（个人）div。例如，我单击第一个图像映射，然后出现一个 div 容器，其中包含有关第一个图像映射的文本。然后我单击第三个图像映射，一个 div 容器出现，其中包含关于第三个图像映射的文本，第一个 div 容器消失。

很像这里： http: //ncmarinescience.com/ => 点击一个彩色点让我们出现一个 div 包含有关该点的一些信息。

感谢您的帮助和来自波兰的问候！

4

0 回答 0