다른 대륙 위로 마우스를 가져갈 수있는 대화 형 세계지도가 있습니다. 그러면 해당 대륙이 마우스 오버 효과를 낼 수 있고 해당 대륙의 이름이 해당 지역에 배치됩니다. 이미지 맵으로이 작업을 수행했으며 영역 위로 마우스를 가져갈 때 jQuery를 통해 이미지를 변경했습니다. 이렇게 :
$(document).ready(function() {
$('.map-area').mouseover(function(e) {
var areaId = $(e.target).attr('id');
$('#worldMap').attr('src', 'http://i.imgur.com/' + areaId + '.png');
$('[id^=text_]').removeClass('open');
$('#text_' + areaId).addClass('open');
});
$('.map-area').mouseout(function() {
$('#worldMap').attr('src', 'http://i.imgur.com/5H1hiBU.png');
$('[id^=text_]').removeClass('open');
});
});
.continent-text {
position: absolute;
color: #fff;
text-transform: uppercase;
font-weight: normal;
font-size: 1rem;
}
.continent-text.eu {
display: none;
left: 28%;
top: 35%;
}
.continent-text.eu.open {
display: block;
}
.continent-text.as {
display: none;
left: 40%;
top: 32%;
}
.continent-text.as.open {
display: block;
}
.continent-text.na {
display: none;
left: 8%;
top: 37%;
}
.continent-text.na.open {
display: block;
}
.continent-text.sa {
display: none;
left: 15%;
top: 77%;
}
.continent-text.sa.open {
display: block;
}
.continent-text.af {
display: none;
left: 28%;
top: 60%;
}
.continent-text.af.open {
display: block;
}
.continent-text.oc {
display: none;
left: 46%;
top: 89%;
}
.continent-text.oc.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/5H1hiBU.png" usemap="#image-map" id="worldMap">
<map name="image-map" class="continent-picker">
<area class="map-area" id="OG7CyJf" target="" alt="Europe" title="Europe" href="#" coords="624,190,632,177,615,172,609,162,601,161,608,155,595,142,602,130,597,85,607,78,558,70,508,96,455,212,474,238,501,233,546,222,584,239,588,219" shape="poly">
<area class="map-area" id="epfSt9E" target="" alt="Africa" title="Africa" href="#" coords="593,509,666,473,686,378,664,318,639,321,620,284,608,259,576,241,540,226,471,239,430,339,515,497" shape="poly">
<area class="map-area" id="jx6tE7q" target="" alt="North America" title="North America" href="#" coords="272,347,287,318,310,313,478,104,479,0,1,0,0,159,57,170,97,164,133,236,189,318" shape="poly">
<area class="map-area" id="XFfneee" target="" alt="South America" title="South America" href="#" coords="272,345,286,317,310,314,377,349,411,386,386,466,413,572,268,573,285,436,254,374" shape="poly">
<area class="map-area" id="y4dLClt" target="" alt="Oceania" title="Oceania" href="#" coords="926,393,926,370,970,364,1046,480,1030,557,939,542,898,501,851,501,832,444,891,401" shape="poly">
<area class="map-area" id="ZUqSyEM" target="" alt="Asia" title="Asia" href="#" coords="609,77,633,7,838,8,1074,74,1074,130,954,318,926,370,925,393,888,401,844,416,709,371,664,318,641,321,608,260,588,227,586,222,625,189,631,177,614,171,608,161,601,160,607,155,594,141,601,130,597,84" shape="poly">
</map>
<div class="continent-text eu open" id="text_OG7CyJf">Europe</div>
<div class="continent-text as" id="text_ZUqSyEM">Asia</div>
<div class="continent-text na" id="text_jx6tE7q">North America</div>
<div class="continent-text sa" id="text_XFfneee">South America</div>
<div class="continent-text oc" id="text_y4dLClt">Oceania</div>
<div class="continent-text af" id="text_epfSt9E">Africa</div>
텍스트의보다 정확한 배치는 https://codepen.io/kerowan/pen/bWEVod를 참조하십시오.
문제 : 영역의 텍스트 위로 마우스를 가져 가면 영역이 깜박이기 시작합니다. 나는 이것이 jQuery 의 mouseover
및 mouseout
부분에서 나온 것이라고 생각합니다 . 텍스트 위로 마우스를 가져 가면 jQuery는 해당 텍스트 mouseout
를 .map-area
. 이 문제를 해결하는 방법을 모르겠습니다. 올바른 방향으로 조금만 이동하면 감사하겠습니다!
pointer-events: none;
텍스트에 사용할 수 있습니다 .
$(document).ready(function() {
$('.map-area').mouseover(function(e) {
var areaId = $(e.target).attr('id');
$('#worldMap').attr('src', 'http://i.imgur.com/' + areaId + '.png');
$('[id^=text_]').removeClass('open');
$('#text_' + areaId).addClass('open');
});
$('.map-area').mouseout(function() {
$('#worldMap').attr('src', 'http://i.imgur.com/5H1hiBU.png');
$('[id^=text_]').removeClass('open');
});
});
.continent-text {
position: absolute;
pointer-events: none;
color: #fff;
text-transform: uppercase;
font-weight: normal;
font-size: 1rem;
}
.continent-text.eu {
display: none;
left: 28%;
top: 35%;
}
.continent-text.eu.open {
display: block;
}
.continent-text.as {
display: none;
left: 40%;
top: 32%;
}
.continent-text.as.open {
display: block;
}
.continent-text.na {
display: none;
left: 8%;
top: 37%;
}
.continent-text.na.open {
display: block;
}
.continent-text.sa {
display: none;
left: 15%;
top: 77%;
}
.continent-text.sa.open {
display: block;
}
.continent-text.af {
display: none;
left: 28%;
top: 60%;
}
.continent-text.af.open {
display: block;
}
.continent-text.oc {
display: none;
left: 46%;
top: 89%;
}
.continent-text.oc.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/5H1hiBU.png" usemap="#image-map" id="worldMap">
<map name="image-map" class="continent-picker">
<area class="map-area" id="OG7CyJf" target="" alt="Europe" title="Europe" href="#" coords="624,190,632,177,615,172,609,162,601,161,608,155,595,142,602,130,597,85,607,78,558,70,508,96,455,212,474,238,501,233,546,222,584,239,588,219" shape="poly">
<area class="map-area" id="epfSt9E" target="" alt="Africa" title="Africa" href="#" coords="593,509,666,473,686,378,664,318,639,321,620,284,608,259,576,241,540,226,471,239,430,339,515,497" shape="poly">
<area class="map-area" id="jx6tE7q" target="" alt="North America" title="North America" href="#" coords="272,347,287,318,310,313,478,104,479,0,1,0,0,159,57,170,97,164,133,236,189,318" shape="poly">
<area class="map-area" id="XFfneee" target="" alt="South America" title="South America" href="#" coords="272,345,286,317,310,314,377,349,411,386,386,466,413,572,268,573,285,436,254,374" shape="poly">
<area class="map-area" id="y4dLClt" target="" alt="Oceania" title="Oceania" href="#" coords="926,393,926,370,970,364,1046,480,1030,557,939,542,898,501,851,501,832,444,891,401" shape="poly">
<area class="map-area" id="ZUqSyEM" target="" alt="Asia" title="Asia" href="#" coords="609,77,633,7,838,8,1074,74,1074,130,954,318,926,370,925,393,888,401,844,416,709,371,664,318,641,321,608,260,588,227,586,222,625,189,631,177,614,171,608,161,601,160,607,155,594,141,601,130,597,84" shape="poly">
</map>
<div class="continent-text eu open" id="text_OG7CyJf">Europe</div>
<div class="continent-text as" id="text_ZUqSyEM">Asia</div>
<div class="continent-text na" id="text_jx6tE7q">North America</div>
<div class="continent-text sa" id="text_XFfneee">South America</div>
<div class="continent-text oc" id="text_y4dLClt">Oceania</div>
<div class="continent-text af" id="text_epfSt9E">Africa</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다