jquery 地图交互式鼠标悬停名称已移动

Question

我会证明是清楚的。我有一个交互式地图，如果我将鼠标放在每个区域上，该区域的名称就会出现在我的鼠标上。没问题。问题是当我进入我的页面时（所以页面一定很长）。如果我将鼠标移到每个区域（我仍然可以看到），名称会发生变化，他太低了，而不是在我的鼠标上。我希望已经清楚了。如何解决问题？

脚本代码和CSS:

<body><script type="text/javascript">
jQuery(function($){
    $('#map').append('<div id="overlay">').append('<div id="tooltip"></div>');
    $('#map #tooltip').hide();

    var regions = [
    {name: 'Vallée Aoste', slug: 'Vallée Aoste'},
    {name: 'Piemonte', slug: 'Piemonte'},
    {name: 'Lombardie', slug: 'Lombardie'},
    {name: 'Trentino Alto Adige', slug: 'Trentino Alto Adige'},
    {name: 'Veneto', slug: 'Veneto'},
    {name: 'Friuli-Venezia Giulia', slug: 'Friuli Venezia Giulia'},
    {name: 'Liguria', slug: 'Liguria'},
    {name: 'Emilia-Romagna', slug: 'Emilia-Romagna'},
    {name: 'Toscane', slug: 'Toscane'},
    {name: 'Marche', slug: 'Marche'},
    {name: 'Umbrie', slug: 'Umbrie'},
    {name: 'Lazio', slug: 'Lazio'},
    {name: 'Abruzzo', slug: 'Abruzzo'},
    {name: 'Molise', slug: 'Molise'},
    {name: 'Campania', slug: 'Campania'},
    {name: 'Puglia', slug: 'Puglia'},
    {name: 'Basilicata', slug: 'Basilicata'},
    {name: 'Calabre', slug: 'Calabre'},
    {name: 'Sicile', slug: 'Sicile'},
    {name: 'Sardaigne', slug: 'Sardaigne'}, 


    ]       

    $(document).mousemove(function(e){
        $('#map #tooltip').css({
            top:e.pageY-$('#map #tooltip').height()-20,
            left:e.pageX-$('#map #tooltip').width()/2-10,
        });
    });

    $('#map area').mouseover(function(){
        var index = $(this).index();
        var left = -index * 360 -360
        $('#map #tooltip').html(regions[index].name).stop().fadeTo(500,1);

        $('#map #overlay').css({
            backgroundPosition : left+"px 0px"
        });
    });
    $('#map').mouseout(function(){
        $('#map #overlay').css({
            backgroundPosition :"360px 0px"
        });
        $('#map #tooltip').stop().fadeTo(10,0);
    });
});</script>

<div id="map">
<img src="void.png" width="360" height="450" usemap="#Map" />
<map name="Map">
  <area shape="poly" coords="23,52,16,60,24,72,34,72,41,68,46,64,48,57,36,51" href="#" />

  <area shape="poly" coords="52,39,64,32,65,42,70,49,67,60,70,69,70,81,66,89,76,95,83,111,72,118,59,118,52,125,46,130,31,129,20,119,22,105,17,97,15,85,26,83,24,75,36,68,44,68,47,64,47,56" href="#" />

  <area shape="poly" coords="73,49,82,63,82,47,88,34,96,44,105,41,113,45,111,29,122,38,119,55,124,66,130,64,127,75,131,89,145,101,131,103,119,101,106,95,92,95,89,108,83,111,76,96,68,88,70,78,72,71,69,62,69,55" href="#" />

  <area shape="poly" coords="121,33,121,21,133,24,145,13,156,13,165,13,175,28,163,33,158,42,161,50,156,55,154,62,147,60,139,70,131,66,125,65,122,59,123,39" href="#" />

  <area shape="poly" coords="175,28,185,33,178,44,176,52,181,69,194,69,189,77,176,79,171,87,177,100,171,109,159,101,148,102,140,96,134,89,130,80,132,68,146,67,149,60,155,61,162,51,159,44,163,34" href="#" />

  <area shape="poly" coords="186,32,209,33,209,42,202,45,210,51,208,62,218,71,213,76,208,71,201,72,192,69,188,68,182,68,181,60,178,51,180,43" href="#" />

  <area shape="poly" coords="42,130,51,129,62,118,72,117,82,114,92,119,110,132,110,140,99,133,89,129,78,123,66,125,59,132,55,138,47,141,37,142,37,135" href="#" />

  <area shape="poly" coords="87,112,93,97,109,97,128,101,145,103,163,105,172,107,173,118,179,135,185,147,178,150,168,146,167,152,160,148,153,143,154,137,148,133,140,136,125,134,115,127,105,120,101,126" href="#" />

  <area shape="poly" coords="103,125,116,128,133,135,155,135,158,144,163,153,167,164,164,174,163,186,159,193,150,204,136,204,136,192,127,183,119,184,124,174,118,165,114,150,112,136,104,132" href="#" />

  <area shape="poly" coords="168,157,175,144,183,148,187,140,200,153,213,169,217,184,200,192,197,184,191,188,190,174,185,165" href="#" />

  <area shape="poly" coords="165,149,176,163,190,177,200,191,185,200,175,202,166,194,161,192,165,177,168,166" href="#" />

  <area shape="poly" coords="160,193,177,202,199,194,197,204,201,212,194,218,203,224,214,228,218,236,217,248,214,252,206,252,194,252,186,244,175,239,166,229,161,220,156,210,153,204,158,196" href="#" />

  <area shape="poly" coords="200,194,216,183,227,200,241,216,233,228,230,227,222,232,215,227,203,224,196,217,201,214,198,205" href="#" />

  <area shape="poly" coords="243,217,253,222,248,236,249,242,242,242,236,248,229,238,223,244,217,242,219,235,228,225,236,227" href="#" />

  <area shape="poly" coords="216,253,218,243,231,241,237,249,246,243,254,252,264,257,258,264,265,285,272,291,260,300,249,293,250,286,245,278,237,276,229,279,232,269,225,270,220,268,218,261" href="#" />

  <area shape="poly" coords="255,225,278,220,285,229,274,241,297,254,316,264,338,280,346,294,345,306,334,304,332,294,325,285,318,288,310,278,301,284,297,269,292,271,284,271,278,263,274,252,267,259,257,254,253,244,250,233" href="#" />

  <area shape="poly" coords="259,264,273,254,282,263,287,269,298,269,299,279,303,286,292,292,286,298,284,306,270,301,264,300,272,292,266,284,260,281" href="#" />

  <area shape="poly" coords="271,303,280,308,292,298,291,306,298,318,305,322,310,337,301,347,293,350,291,365,281,375,280,388,268,386,266,377,271,365,270,362,278,357,284,350,279,343,277,336,277,325,272,321,271,314" href="#" />

  <area shape="poly" coords="265,374,251,382,248,377,238,381,228,385,215,387,206,386,200,381,194,384,189,386,185,379,180,387,177,399,185,405,200,409,212,417,224,421,230,427,241,434,248,436,255,428,256,420,250,412,252,408,257,398,264,386,265,378" href="#" />

  <area shape="poly" coords="57,258,63,264,80,250,91,253,98,264,99,273,100,283,97,288,99,302,99,310,99,322,96,330,93,338,85,332,82,335,82,345,73,345,69,338,64,330,64,317,67,306,66,300,63,293,66,285,63,281,60,268,54,269,55,264" href="#" />
</map>
</div>
</body>





     #map{
        width: 360px;
        height: 450px;
        background:url(italia.png) left top no-repeat;
        position:absolute;
        top:150px;
        left:350px;}

#map #overlay{
    width: 360px;
    height: 450px;
    background:url(italia.png) 360px top no-repeat;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
}

#map img{
    position:absolute;
    top:0px;
    left:0px;
    z-index:2;
}

#map #tooltip{
        position:fixed;
        border-radius:5px;
        color:#FFF;
        background:#000;
        padding: 0 10px;
        display:inline;
        top:0px;
        left:0px;
        z-index:3;
        text-align:center;}

Answer 1

这是您需要的：top:e.pageY-$('#map #tooltip').height()-20 - $(document).scrollTop()

$(document).mousemove(function(e){
    $('#map #tooltip').css({
        top:e.pageY-$('#map #tooltip').height()-20 - $(document).scrollTop(),
        left:e.pageX-$('#map #tooltip').width()/2-10,
    });
});

jquery 地图交互式鼠标悬停名称已移动

jquery map interactive mouseover name shifted

jquery

css

dictionary

mouseover

interactive