-1
ich werde beweisen, klar zu sein. Ich habe eine interaktive Karte, wenn ich meine Maus auf jeder Region passiere, erscheint der Name der Region auf meiner Maus. Kein Problem. Das Problem ist, wenn ich auf meiner Seite gehe (so muss die Seite lang sein). Wenn ich meine Maus über jede Region führe (die ich noch sehen kann), ist der Name verschoben, er ist zu tief und nicht auf meiner Maus. Ich hoffe, es war klar. Wie kann man das Problem lösen?jquery map interaktive mouseover name verschoben
Script-Code und 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;}
Es ist, weil Sie einen harten codierten Wert haben, die Sie von 'Top-subtrahieren: e.pageY- $ ('#map #tooltip'). height() - 20'. Die Höhe nach oben ist nicht länger 20, wenn Sie nach unten scrollen müssen. – Zorken17
also was muss ich schreiben? Ich weiß nicht, wie ich sagen kann, hängt davon ab, meine Scroll down – stb5573
Was verwenden Sie '-20'for? – Zorken17