Question

我在做一些学校项目，但我真的被困了。假设我的国家地图分为8个地区。我想在鼠标悬停后突出显示（使用图像）一个区域。此时只有背景地图可见。我可以点击带有重定向的图像，但它们是不可见的，甚至不在正确的位置。有任何想法吗？感谢。

<HTML>
<HEAD>
 <script>
    $(document).ready(function(){

    // region map
    $('#regions area')
        .live('mouseover', function(){
            $('img#'+$(this).attr('forReg')).show();
            return false;
        })
        .live('mouseout', function(){
            $('img#'+$(this).attr('forReg')).hide();
            return false;
    });
    });
    </script>
</HEAD>
<BODY>
    <div style="position: absolute; height: 608px; width: 1225px; background-image: url('background.jpg')">
            <div style="position: absolute; height: 608px; width: 1225px; background-image: url('slovensko.png')">
                <img id="bratislava" style="position: absolute; left: 0px; top: 307px; display: none;" src="bratislava.png">
                <img id="trnava" style="position: absolute; left: 25px; top: 232px; display: none;" src="trnava.png">
                <img id="trencin" style="position: absolute; left: 119px; top: 95px; display: none;" src="trencin.png">
                <img id="nitra" style="position: absolute; left: 184px; top: 290px; display: none;" src="nitra.png">
                <img id="zilina" style="position: absolute; left: 336px; top: 0px; display: none;" src="zilina.png">
                <img id="bystrica" style="position: absolute; left: 357px; top: 219px; display: none;" src="bystrica.png">
                <img id="presov" style="position: absolute; left: 658px; top: 47px; display: none;" src="presov.png">
                <img id="kosice" style="position: absolute; left: 725px; top: 196px; display: none;" src="kosice.png">
                <img usemap="#regions" style="position: absolute" src="nazvy-krajov.png" width="1225" height="608" alt="">
                <map name="regions">
                    <area forReg="bratislava" shape="poly" coords="48,197,90,199,104,171,144,156,135,95,106,55,102,31,121,13,110,0,78,28,48,26,9,52,5,92,29,150" href="/bratislava.html">
                    <area forReg="trnava" shape="poly" coords="110,166,121,227,59,278,158,365,202,310,200,265,184,262,185,232,207,217,201,173,221,133,199,119,209,98,225,92,169,63,128,79,116,56,124,46,60,0,13,52,2,108,39,102,66,103,88,75,96,90,76,107,82,128" href="/trnava.html">
                    <area forReg="trencin" shape="poly" coords="141,199,209,268,313,189,284,148,290,119,240,120,271,91,219,0,174,10,154,94,123,95,113,126,1,171,35,222,76,206,137,229" href="/trencin.html">
                    <area forReg="nitra" shape="poly" coords="2,311,217,310,246,222,282,218,299,170,247,177,247,150,255,137,230,98,183,128,194,101,173,54,142,71,119,46,127,33,74,0,72,27,38,56,59,81,35,131,39,166,18,182,22,211,41,219,39,257" href="/nitra.html">
                    <area forReg="zilina" shape="poly" coords="135,275,139,235,267,218,352,227,354,162,298,125,301,64,271,64,234,0,191,26,173,62,129,66,127,32,39,31,0,98,44,159,46,189,15,212,71,213,67,248,98,278" href="/zilina.html">
                    <area forReg="bystrica" shape="poly" coords="215,278,223,243,247,232,312,265,387,221,427,157,392,149,403,113,368,64,380,22,270,11,248,1,198,4,180,20,117,22,112,60,71,63,24,120,1,124,20,193,56,172,78,211,66,249,94,256,121,241,113,287,174,281" href="/bystrica.html">
                    <area forReg="presov" shape="poly" coords="118,156,173,167,198,158,240,170,243,182,295,192,292,206,303,211,324,188,343,189,361,217,409,219,409,179,447,193,482,192,479,180,495,167,506,186,533,188,566,115,458,71,446,36,356,2,339,12,292,2,280,17,265,6,242,13,253,29,222,52,177,14,147,29,127,16,97,24,94,38,67,41,44,94,17,73,2,93,5,113,35,121,30,169,33,188,89,195,95,168" href="/presov.html">
                    <area forReg="kosice" shape="poly" coords="137,142,205,165,274,139,338,213,420,197,425,127,466,86,466,40,440,36,430,17,409,43,379,47,370,31,339,32,343,62,315,76,270,35,253,36,236,61,217,36,123,3,122,13,99,18,62,3,22,22,31,33,0,73,35,141,22,175,67,178,75,158" href="/kosice.html">
                </map>
            </div>
    </div>
</BODY>
</HTML>

Answer 1

<map name="regions">

应该是这个

<map id="regions">

这样提到的时候 - $（'＃regions'） “＃”表示你指的是ID

所以试试这个...可能会解决这个问题......可能是你的代码中存在更多问题。

Answer 2

您列出的地图名称不是ID

您需要添加：

<map name="regions" id="regions">

因为您在javascript中使用了#

更多信息：

here

鼠标悬停问题

2 个答案: