-1
나는 분명해질 것입니다. 대화식지도가 있습니다. 마우스를 각 영역에 건 드리면 마우스의 영역 이름이 나타납니다. 문제 없어. 문제는 내 페이지에서 내려갈 때입니다 (페이지가 길어야 함). 내가 각 지역 (아직 볼 수있는)에 마우스를 통과하면, 이름이 바뀌고, 그는 너무 아래로 내 마우스에 없습니다. 나는 분명히하기를 희망한다. 문제를 해결하는 방법?jquery지도 대화 형 마우스 오버 이름이 변경되었습니다.
스크립트 코드와 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;}
그것은 당신이 당신이 최고'에서 빼기 하드 코드 값을 가지고 있기 때문에 : e.pageY- $ ('#map #tooltip'). 높이() - 20'. 아래로 스크롤해야 할 때 상단까지의 높이가 더 이상 20이 아닙니다. – Zorken17
그래서 무엇을 써야하나요? 나는 그것이 내 스크롤에 달려 있다고 말할 줄 모른다. – stb5573
당신은'-20'을 무엇을 사용하고 있습니까? – Zorken17