中国省份行政区域地图划分和区域连接,纯html实现

  •   
  • 24474
  • HTML
  • 3
  • super_dodo
  • 2014/10/25

在一些集团性质的企业或者机构的网站的开发和功能软件中。涉及到全国分支机构或者加盟的直观展示的网站页面展示的平台的时候。就需要一个中国的省份行政区域地图划分，并直观的表达或者展示该区域所可以点击或者链接的页面。方便用户直观高效的去查询去区域的相关信息。比表单更直白更直观。

我在此处整理集合成为了一个页面。需要用到2张图片（一张是背景图片,另外一张的话是省份前面的动态的小图标）。。这个页面里面只有css样式和html的内容。。不需要借助插件等工具。。。你可以直接复制下面代码即可（图片需要自己去下载）。。此处为了方便大家。。点击直接进入演示和下载的页面。。。

中国地图行政区域划分地图链接

中国地图行政区域划分地图链接


直接上代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>中国地图行政区域划分地图链接</title>
	<style type="text/css">
		/*中国地图的区域链接*/
		*{margin:0;padding:0;word-wrap:break-word;}
		#china_map {background: url(map.gif) no-repeat left top; width: 730px; height: 591px; font-size:12px; margin-left:auto; margin-right:auto;}
		#china_map h1 {font-family:"Microsoft Yahei";color:#6e6e6e; font-size:12px;line-height:24px; display: block; font-weight: normal; position: absolute;}
		.mapl a:link {display: block; background: url(maph1.gif) no-repeat; color: #000; text-decoration: none; font-size:12px;}
		.mapl a:visited {display: block; background: url(maph1.gif) no-repeat; color: #000; text-decoration: none; font-size:12px;}
		.mapr a:link {display: block; background: url(maph1.gif) no-repeat; color: #000; text-decoration: none; font-size:12px;}
		.mapr a:visited {display: block; background: url(maph1.gif) no-repeat; color: #000; text-decoration: none; font-size:12px;}
		.mapl a:link {background-position: left 4px; padding-left: 20px;}
		.mapl a:visited {background-position: left 4px; padding-left: 20px;}
		.mapr a:link {background-position: left bottom; padding-left: 20px;}
		.mapr a:visited {background-position: left bottom; padding-left: 20px;}
		.mapl a:hover {padding-right: 20px; display: block; background: url(maph1.gif) no-repeat; color: #000;}
		.mapl a:active {padding-right: 20px; display: block; background: url(maph1.gif) no-repeat; color: #000;}
		.mapr a:hover {padding-right: 20px; display: block; background: url(maph1.gif) no-repeat; color: #ff0000;}
		.mapr a:active {padding-right: 20px; display: block; background: url(maph1.gif) no-repeat; color: #ff0000;}
		#china_map .mapr a:hover {background-position: left bottom; padding-left: 20px;}
		#china_map .mapr a:active {background-position: left bottom; padding-left: 20px;}
		#china_map .mapl a:hover {background-position: left 4px; padding-left: 20px;}
		#china_map .mapl a:active {background-position: left 4px; padding-left: 20px;}
	</style>
</head>
<body>

	<div id="china_map">
		<h1 style="font-size: 18px; margin: 90px 0px 0px 270px; font-weight:bold;">请先选择您所在的城市</h1>
		<h1 class="mapr" style="margin: 220px 0px 0px 255px"><a href="http://www.dodobook.net/php/1569">甘肃</a></h1>
		<h1 class="mapr" style="margin: 343px 0px 0px 135px"><a href="http://www.dodobook.net/php/1573">西藏</a></h1>
		<h1 class="mapr" style="margin: 380px 0px 0px 316px"><a href="http://www.dodobook.net/php/1563">四川</a></h1>
		<h1 class="mapr" style="margin: 385px 0px 0px 396px"><a href="http://www.dodobook.net/php/1571">重庆</a></h1>
		<h1 class="mapr" style="margin: 370px 0px 0px 456px"><a href="http://www.dodobook.net/php/1552">湖北</a></h1>

		<h1 class="mapr" style="margin: 440px 0px 0px 385px"><a href="http://www.dodobook.net/php/1566">贵州</a></h1>
		<h1 class="mapr" style="margin: 430px 0px 0px 450px"><a href="http://www.dodobook.net/php/1596">湖南</a></h1>
		<h1 class="mapr" style="margin: 410px 0px 0px 505px"><a href="http://www.dodobook.net/php/1562">江西</a></h1>
		<h1 class="mapr" style="margin: 390px 0px 0px 565px"><a href="http://www.dodobook.net/php/1565">浙江</a></h1>

		<h1 class="mapr" style="margin: 445px 0px 0px 545px"><a href="http://www.dodobook.net/php/1551">福建</a></h1>
		<h1 class="mapr" style="margin: 465px 0px 0px 595px"><a href="http://www.dodobook.net/php/1048">台湾</a></h1>

		<h1 class="mapr" style="margin: 490px 0px 0px 415px"><a href="http://www.dodobook.net/php/1559">广西</a></h1>
		<h1 class="mapr" style="margin: 560px 0px 0px 434px"><a href="http://www.dodobook.net/php/1554">海南</a></h1>
		<h1 class="mapr" style="margin: 490px 0px 0px 485px"><a href="http://www.dodobook.net/php/1570">广东</a></h1>
		<h1 class="mapr" style="margin: 477px 0px 0px 305px"><a href="http://www.dodobook.net/php/1567">云南</a></h1>
		<h1 class="mapr" style="margin: 193px 0px 0px 138px"><a href="http://www.dodobook.net/php/1564">新疆</a></h1>
		<h1 class="mapr" style="margin: 294px 0px 0px 250px"><a href="http://www.dodobook.net/php/1556">青海</a></h1>
		<h1 class="mapr" style="margin: 219px 0px 0px 400px"><a href="http://www.dodobook.net/php/1553">内蒙古 </a></h1>
		<h1 class="mapr" style="margin: 270px 0px 0px 380px"><a href="http://www.dodobook.net/php/1550">宁夏</a></h1>
		<h1 class="mapr" style="margin: 270px 0px 0px 453px"><a href="http://www.dodobook.net/php/1560">山西</a></h1>
		<h1 class="mapr" style="margin: 250px 0px 0px 493px"><a href="http://www.dodobook.net/php/1575">河北</a></h1>
		<h1 class="mapr" style="margin: 235px 0px 0px 525px"><a href="http://www.dodobook.net/php/1558">天津</a></h1>
		<h1 class="mapr" style="margin: 217px 0px 0px 505px"><a href="http://www.dodobook.net/php/1572">北京</a></h1>

		<h1 class="mapr" style="margin: 190px 0px 0px 575px"><a href="http://www.dodobook.net/php/1549">辽宁</a></h1>
		<h1 class="mapr" style="margin: 150px 0px 0px 610px"><a href="http://www.dodobook.net/php/1561">吉林</a></h1>
		<h1 class="mapr" style="margin: 100px 0px 0px 605px"><a href="http://www.dodobook.net/php/1568">黑龙江</a></h1>

		<h1 class="mapr" style="margin: 280px 0px 0px 523px"><a href="http://www.dodobook.net/php/1557">山东</a></h1>
		<h1 class="mapr" style="margin: 325px 0px 0px 465px"><a href="http://www.dodobook.net/php/1574">河南</a></h1>
		<h1 class="mapr" style="margin: 355px 0px 0px 520px"><a href="http://www.dodobook.net/php/1547">安徽</a></h1>
		<h1 class="mapr" style="margin: 325px 0px 0px 560px"><a href="http://www.dodobook.net/php/1555">江苏</a></h1>
		<h1 class="mapr" style="margin: 350px 0px 0px 590px"><a href="http://www.dodobook.net/php/1548">上海</a></h1>

		<h1 class="mapr" style="margin: 325px 0px 0px 400px"><a href="http://www.dodobook.net/php/1576">陕西</a></h1>
	</div>
</body>
</html>

再次温馨提示 :点击直接进入演示和下载的页面。。。

不为明天而烦恼,不为昨天而叹息,只为今天更美好!