CodeBox - 代码盒子

Css Map

weilaixu at Dec.21th,09 16:50

DEMO在这里http://weilaixu.cn/demo/map，只需要修改一下背景图的路径就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css map</title>
<style type="text/css">
<!--
#map{ width:550px; height:420px; position:relative; overflow:hidden; background:url(http://weilaixu.cn/demo/map/map.gif) no-repeat; margin:0px auto}

#map a{ width:33px;  border:1px solid #FF9900; text-align:center; display:block; position:absolute; background:#fff}
#map a{ font-size:12px; color:#000; text-decoration:none; padding:1px 0 0}
#map a:hover{ background:#0066CC; border-top:1px solid #0099FF; border-left:1px solid #0099FF; border-bottom:1px solid #000066; border-right:1px solid #000066;  color:#fff}

#map .a_3{width:48px;}
#map .red{ color:red!important}

.beijing{left:355px; top:140px}
.shanghai{left:438px; top:243px}
.chongqing{left:284px; top:271px}
.anhui{left:377px; top:241px}
.fujian{left:401px; top:302px}
.gansu{left:188px; top:149px}
.guangdong{left:349px; top:336px}
.guangxi{left:298px; top:337px}
.guizhou{left:280px; top:304px}
.hainan{left:342px; top:382px}
.hebei{left:350px; top:172px}
.heilongjiang{left:432px; top:68px}
.henan{left:333px; top:223px}
.xianggang{left:372px; top:355px}
.hubei{left:333px; top:253px}
.hunan{left:325px; top:283px}
.jiangsu{left:412px; top:218px}
.jiangxi{left:368px; top:281px}
.jilin{left:441px; top:103px}
.liaoning{left:418px; top:132px}
.aomen{left:335px; top:360px}
.neimenggu{left:291px; top:140px}
.ningxia{left:271px; top:184px}
.qinghai{left:179px; top:200px}
.shandong{left:384px; top:191px}
.shanxi{left:318px; top:194px}
.shanxi-{left:288px; top:221px}
.sichuan{left:238px; top:255px}
.taiwan{left:448px; top:308px}
.tianjin{left:386px; top:158px}
.xinjiang{left:89px; top:135px}
.xizang{left:101px; top:239px}
.yunnan{left:222px; top:325px}
.zhejiang{left:415px; top:266px}
-->
</style>
</head>