HTML5圖像中國地圖代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>中國地圖</title>
<style>
#china-map {
width: 700px;
height: 600px;
background: url(china-map.jpg) no-repeat;
}
#china-map a{
display: block;
position: absolute;
border: 1px solid #fff;
}
#china-map a:hover{
background: #fff;
color: #000;
}
#a1{
top: 110px;
left: 160px;
width: 50px;
height: 50px;
}
#a2{
top: 190px;
left: 270px;
width: 50px;
height: 50px;
}
#a3{
top: 240px;
left: 430px;
width: 50px;
height: 50px;
}
#a4{
top: 160px;
left: 520px;
width: 50px;
height: 50px;
}
#a5{
top: 340px;
left: 400px;
width: 50px;
height: 50px;
}
#a6{
top: 390px;
left: 240px;
width: 50px;
height: 50px;
}
#a7{
top: 480px;
left: 330px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="china-map">
<a id="a1" href="http://www.beijing.com">北京</a>
<a id="a2" href="http://www.shanghai.com">上海</a>
<a id="a3" href="http://www.guangzhou.com">廣州</a>
<a id="a4" href="http://www.chongqing.com">重慶</a>
<a id="a5" href="http://www.xian.com">西安</a>
<a id="a6" href="http://www.chengdu.com">成都</a>
<a id="a7" href="http://www.shenyang.com">沈陽</a>
</div>
</body>
</html>