㰀栀琀洀氀㸀ഀഀ
㰀琀椀琀氀攀㸀樀焀甀攀爀礀 ﹗ݖ끨킋㩣⁹ⴀ 罺ₕ偽㱧⼀琀椀琀氀攀㸀ഀഀ
㰀猀挀爀椀瀀琀㸀ഀഀ
$(document).ready(function(){
ऀऀഀഀ
// set the wrapper width and height to match the img size
ऀऀऀ␀⠀✀⌀眀爀愀瀀瀀攀爀✀⤀⸀挀猀猀⠀笀✀眀椀搀琀栀✀㨀␀⠀✀⌀眀爀愀瀀瀀攀爀 椀洀最✀⤀⸀眀椀搀琀栀⠀⤀Ⰰഀഀ
'height':$('#wrapper img').height()
ऀऀऀ紀⤀ഀഀ
ऀऀऀ⼀⼀琀漀漀氀琀椀瀀 搀椀爀攀挀琀椀漀渀ഀഀ
var tooltipDirection;
ऀऀऀऀऀऀ ഀഀ
for (i=0; i<$(".pin").length; i++)
ऀऀऀ笀ऀऀऀऀഀഀ
// set tooltip direction type - up or down
ऀऀऀऀ椀昀 ⠀␀⠀∀⸀瀀椀渀∀⤀⸀攀焀⠀椀⤀⸀栀愀猀䌀氀愀猀猀⠀✀瀀椀渀ⴀ搀漀眀渀✀⤀⤀ 笀ഀഀ
tooltipDirection = 'tooltip-down';
ऀऀऀऀ紀 攀氀猀攀 笀ഀഀ
tooltipDirection = 'tooltip-up';
ऀऀऀऀऀ紀ഀഀ
ऀऀऀऀ⼀⼀ 愀瀀瀀攀渀搀 琀栀攀 琀漀漀氀琀椀瀀ഀഀ
$("#wrapper").append("\
ऀऀऀऀऀऀऀऀऀऀऀऀऀ㰀搀椀瘀 挀氀愀猀猀㴀✀琀漀漀氀琀椀瀀✀㸀∀ ⬀ ␀⠀∀⸀瀀椀渀∀⤀⸀攀焀⠀椀⤀⸀栀琀洀氀⠀⤀ ⬀ ∀㰀⼀搀椀瘀㸀尀ഀഀ
");
ऀऀऀ紀 ഀഀ
ऀऀऀ⼀⼀ 猀栀漀眀⼀栀椀搀攀 琀栀攀 琀漀漀氀琀椀瀀ഀഀ
$('.tooltip-up, .tooltip-down').mouseenter(function(){
ऀऀऀऀऀऀ␀⠀琀栀椀猀⤀⸀挀栀椀氀搀爀攀渀⠀✀⸀琀漀漀氀琀椀瀀✀⤀⸀昀愀搀攀䤀渀⠀ ⤀㬀ഀഀ
}).mouseleave(function(){
ऀऀऀऀऀऀ␀⠀琀栀椀猀⤀⸀挀栀椀氀搀爀攀渀⠀✀⸀琀漀漀氀琀椀瀀✀⤀⸀昀愀搀攀伀甀琀⠀ ⤀㬀ഀഀ
})
ऀऀ紀⤀㬀ഀഀ
ऀ㰀猀琀礀氀攀㸀ഀഀ
body {
ऀऀऀ琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀ഀഀ
font: 13px Arial,Helvetica;
ऀऀ紀ഀഀ
ऀऀ⼀⨀ 刀攀氀愀琀椀瘀攀 瀀漀猀椀琀椀漀渀椀渀最⨀⼀ഀഀ
#wrapper {
ऀऀऀ瀀漀猀椀琀椀漀渀㨀 爀攀氀愀琀椀瘀攀㬀ഀഀ
margin: 50px auto 20px auto;
ऀऀऀ戀漀爀搀攀爀㨀 瀀砀 猀漀氀椀搀 ⌀昀愀昀愀昀愀㬀ഀഀ
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
ऀऀऀⴀ眀攀戀欀椀琀ⴀ戀漀砀ⴀ猀栀愀搀漀眀㨀 ㌀瀀砀 ㌀瀀砀 爀最戀愀⠀ Ⰰ Ⰰ Ⰰ⸀㔀⤀㬀ഀഀ
box-shadow: 0 3px 3px rgba(0,0,0,.5);
ऀऀ紀ഀഀ
ऀऀ⼀⨀ 䠀椀搀攀 琀栀攀 漀爀椀最椀渀愀氀 琀漀漀氀琀椀瀀猀 挀漀渀琀攀渀琀猀 ⨀⼀ഀഀ
.pin {
ऀऀऀ搀椀猀瀀氀愀礀㨀 渀漀渀攀㬀ഀഀ
}
ऀऀഀഀ
/* Begin styling the tooltips and pins */
ऀऀ⸀琀漀漀氀琀椀瀀ⴀ甀瀀Ⰰ ⸀琀漀漀氀琀椀瀀ⴀ搀漀眀渀 笀ഀഀ
position: absolute;
ऀऀऀ戀愀挀欀最爀漀甀渀搀㨀 甀爀氀⠀椀洀愀最攀猀⼀愀爀爀漀眀ⴀ甀瀀ⴀ搀漀眀渀⸀瀀渀最⤀㬀ഀഀ
width: 36px;
ऀऀऀ栀攀椀最栀琀㨀 㔀㈀瀀砀㬀ഀഀ
}
ऀऀഀഀ
.tooltip-down {
ऀऀऀ戀愀挀欀最爀漀甀渀搀ⴀ瀀漀猀椀琀椀漀渀㨀 ⴀ㔀㈀瀀砀㬀ഀഀ
}
ऀऀഀഀ
.tooltip {
ऀऀऀ搀椀猀瀀氀愀礀㨀 渀漀渀攀㬀ഀഀ
width: 200px;
ऀऀऀ挀甀爀猀漀爀㨀 栀攀氀瀀㬀ഀഀ
text-shadow: 0 1px 0 #fff;
ऀऀऀ瀀漀猀椀琀椀漀渀㨀 愀戀猀漀氀甀琀攀㬀ഀഀ
top: 10px;
ऀऀऀ氀攀昀琀㨀 㔀 ─㬀ഀഀ
z-index: 999;
ऀऀऀ洀愀爀最椀渀ⴀ氀攀昀琀㨀 ⴀ㔀瀀砀㬀ഀഀ
padding:15px;
ऀऀऀ挀漀氀漀爀㨀 ⌀㈀㈀㈀㬀ഀഀ
-moz-border-radius: 5px;
ऀऀऀⴀ眀攀戀欀椀琀ⴀ戀漀爀搀攀爀ⴀ爀愀搀椀甀猀㨀 㔀瀀砀㬀ഀഀ
border-radius: 5px;
ऀऀऀⴀ洀漀稀ⴀ戀漀砀ⴀ猀栀愀搀漀眀㨀 ㌀瀀砀 爀最戀愀⠀ Ⰰ Ⰰ Ⰰ⸀㜀⤀㬀ഀഀ
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
ऀऀऀ戀漀砀ⴀ猀栀愀搀漀眀㨀 ㌀瀀砀 爀最戀愀⠀ Ⰰ Ⰰ Ⰰ⸀㜀⤀㬀ഀഀ
background: #fff1d3;
ऀऀऀ戀愀挀欀最爀漀甀渀搀㨀 ⴀ眀攀戀欀椀琀ⴀ最爀愀搀椀攀渀琀⠀氀椀渀攀愀爀Ⰰ 氀攀昀琀 琀漀瀀Ⰰ 氀攀昀琀 戀漀琀琀漀洀Ⰰ 昀爀漀洀⠀⌀昀昀昀搀㌀⤀Ⰰ 琀漀⠀⌀昀昀搀戀㤀 ⤀⤀㬀ഀഀ
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
ऀऀऀ戀愀挀欀最爀漀甀渀搀㨀 ⴀ洀漀稀ⴀ氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀琀漀瀀Ⰰ ⌀昀昀昀搀㌀Ⰰ ⌀昀昀搀戀㤀 ⤀㬀ഀഀ
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
ऀऀऀ戀愀挀欀最爀漀甀渀搀㨀 ⴀ漀ⴀ氀椀渀攀愀爀ⴀ最爀愀搀椀攀渀琀⠀琀漀瀀Ⰰ ⌀昀昀昀搀㌀Ⰰ ⌀昀昀搀戀㤀 ⤀㬀ഀഀ
background: linear-gradient(top, #fff1d3, #ffdb90);
ऀऀ紀ഀഀ
ऀऀ⸀琀漀漀氀琀椀瀀㨀㨀愀昀琀攀爀 笀ഀഀ
content: '';
ऀऀऀ瀀漀猀椀琀椀漀渀㨀 愀戀猀漀氀甀琀攀㬀ഀഀ
top: -10px;
ऀऀऀ氀攀昀琀㨀 㔀 ─㬀ഀഀ
margin-left: -10px;
ऀऀऀ戀漀爀搀攀爀ⴀ戀漀琀琀漀洀㨀 瀀砀 猀漀氀椀搀 ⌀昀昀昀搀㌀㬀ഀഀ
border-left: 10px solid transparent;
ऀऀऀ戀漀爀搀攀爀ⴀ爀椀最栀琀 㨀 瀀砀 猀漀氀椀搀 琀爀愀渀猀瀀愀爀攀渀琀㬀ഀഀ
}
ऀऀഀഀ
.tooltip-down .tooltip {
ऀऀऀ戀漀琀琀漀洀㨀 ㈀瀀砀㬀ഀഀ
top: auto;
ऀऀ紀ഀഀ
ऀऀ⸀琀漀漀氀琀椀瀀ⴀ搀漀眀渀 ⸀琀漀漀氀琀椀瀀㨀㨀愀昀琀攀爀 笀ഀഀ
bottom: -10px;
ऀऀऀ琀漀瀀㨀 愀甀琀漀㬀ഀഀ
border-bottom: 0;
ऀऀऀ戀漀爀搀攀爀ⴀ琀漀瀀㨀 瀀砀 猀漀氀椀搀 ⌀昀昀搀戀㤀 㬀ഀഀ
}
ऀऀഀഀ
.tooltip h2 {
ऀऀऀ昀漀渀琀㨀 戀漀氀搀 ⸀㌀攀洀 ✀吀爀攀戀甀挀栀攀琀 䴀匀✀Ⰰ 吀愀栀漀洀愀Ⰰ 䄀爀椀愀氀㬀ഀഀ
margin: 0 0 10px;
ऀऀ紀ഀഀ
ऀऀ⸀琀漀漀氀琀椀瀀 甀氀 笀ഀഀ
margin: 0;
ऀऀऀ瀀愀搀搀椀渀最㨀 㬀ഀഀ
list-style: none;
ऀऀ紀ऀऀഀഀ
㰀⼀栀攀愀搀㸀ഀഀ
㰀戀漀搀礀㸀ഀഀ
㰀搀椀瘀 椀搀㴀∀眀爀愀瀀瀀攀爀∀㸀ഀഀ
ഀഀ
ऀ 㰀栀㈀㸀一漀爀琀栀 䄀洀攀爀椀挀愀㰀⼀栀㈀㸀ऀ ഀഀ
ऀऀ㰀氀椀㸀㰀戀㸀䄀爀攀愀 ⠀欀洀ﴀ⧿㨀㰀⼀戀㸀 ㈀㐀Ⰰ㐀㤀 Ⰰ 㰀⼀氀椀㸀ഀഀ
- Population: 528,720,588
ഀഀ
㰀⼀搀椀瘀㸀ഀഀ
㰀搀椀瘀 挀氀愀猀猀㴀∀瀀椀渀∀ 搀愀琀愀ⴀ砀瀀漀猀㴀∀㈀㜀 ∀ 搀愀琀愀ⴀ礀瀀漀猀㴀∀㌀㈀ ∀㸀ऀ ഀഀ
South America
ऀ 㰀甀氀㸀ഀഀ
Area (km�): 17,840,000
ऀऀ㰀氀椀㸀㰀戀㸀倀漀瀀甀氀愀琀椀漀渀㨀㰀⼀戀㸀 ㌀㠀㈀Ⰰ Ⰰ 㰀⼀氀椀㸀ഀഀ
ऀ 㰀⼀甀氀㸀 ഀഀ
ऀ 㰀栀㈀㸀䔀甀爀漀瀀攀㰀⼀栀㈀㸀ऀ ഀഀ
ऀऀ㰀氀椀㸀㰀戀㸀䄀爀攀愀 ⠀欀洀ﴀ⧿㨀㰀⼀戀㸀 Ⰰ㠀 Ⰰ 㰀⼀氀椀㸀ഀഀ
- Population: 731,000,000
ഀഀ
㰀⼀搀椀瘀㸀ഀഀ
㰀搀椀瘀 挀氀愀猀猀㴀∀瀀椀渀∀ 搀愀琀愀ⴀ砀瀀漀猀㴀∀㐀㔀 ∀ 搀愀琀愀ⴀ礀瀀漀猀㴀∀㈀㔀 ∀㸀ऀ ഀഀ
Africa
ऀ 㰀甀氀㸀ഀഀ
Area (km�): 30,370,000
ऀऀ㰀氀椀㸀㰀戀㸀倀漀瀀甀氀愀琀椀漀渀㨀㰀⼀戀㸀 Ⰰ ㈀㈀Ⰰ Ⰰ 㰀⼀氀椀㸀ഀഀ
ऀ 㰀⼀甀氀㸀 ഀഀ
ऀ 㰀栀㈀㸀䄀猀椀愀㰀⼀栀㈀㸀ऀ ഀഀ
ऀऀ㰀氀椀㸀㰀戀㸀䄀爀攀愀 ⠀欀洀ﴀ⧿㨀㰀⼀戀㸀 㐀㌀Ⰰ㠀㈀ Ⰰ 㰀⼀氀椀㸀ഀഀ
- Population: 3,879,000,000
ഀഀ
㰀⼀搀椀瘀㸀ഀഀ
㰀搀椀瘀 挀氀愀猀猀㴀∀瀀椀渀 瀀椀渀ⴀ搀漀眀渀∀ 搀愀琀愀ⴀ砀瀀漀猀㴀∀㜀㔀 ∀ 搀愀琀愀ⴀ礀瀀漀猀㴀∀㌀ ∀㸀ऀ ഀഀ
Australia
ऀ 㰀甀氀㸀ഀഀ
Area (km�): 9,008,500
ऀऀ㰀氀椀㸀㰀戀㸀倀漀瀀甀氀愀琀椀漀渀㨀㰀⼀戀㸀 ㌀Ⰰ㈀㘀 Ⰰ 㰀⼀氀椀㸀ഀഀ
ऀ 㰀⼀甀氀㸀 ഀഀ
适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。
㰀瀀㸀攀遧ᩮ㳿愀 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀猀挀⸀挀栀椀渀愀稀⸀挀漀洀⼀∀ 琀愀爀最攀琀㴀∀开戀氀愀渀欀∀㸀罺ₕ偽㱧⼀愀㸀㰀⼀瀀㸀ഀഀ
㰀⼀戀漀搀礀㸀ഀഀ