该博客展示了一个使用HTML实现的中国地图，每个省份都是一个链接，点击后可以跳转到相应页面。通过CSS和JavaScript实现省份的hover效果，提供了一种视觉化的交互体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全国地图-Download by http://www.codefans.net</title>
<style type="text/css">
/* The group of people */
*{text-align:center;}
#gmap {display:block; width:550px; height:617px; background:url(images/map.jpg) no-repeat; position:relative; margin:0 auto 2em auto;}
#gmap a {color:#000; font-family:arial, sans-serif; font-size:1.2em; font-weight:bold; text-transform:uppercase;}
a#title2, a#title2:visited {display:block; width:550px; height:617px; padding-top:260px; position:absolute; left:0; top:0; cursor:default; text-decoration:none;}
* html a#title2 {height:617px; he\ight:0;}/*IE6.0以下中显示*/
#gmap a#title2:hover {background:transparent url(group_col.gif) no-repeat 0 0; overflow:visible; color:#c00;}
/*新疆*/
a#xj {display:block; width:206px; height:0; padding-top:156px; overflow:hidden; position:absolute; left:14px; top:63px;}
* html a#xj {height:156px; he\ight:0;text-indent:-9000px;}
a#xj:hover {background:transparent url(images/xj1.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;}
/*西藏*/
a#xz {display:block; width:200px; height:0; padding-top:124px; overflow:hidden; position:absolute; left:37px; top:207px;}
* html a#xz {height:124px; he\ight:0;}
a#xz:hover {background:transparent url(images/xz.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;}
/*青海*/
a#qh {display:block; width:132px; height:0; padding-top:96px; overflow:hidden; position:absolute; left:147px; top:184px;}
* html a#qh {height:96px; he\ight:0;}
a#qh:hover {background:transparent url(images/qh.gif) no-repeat 0 0; height:-20px; overflow:visible;text-indent:-9000px;}
/*甘肃*/
a#gs {display:block; width:148px; height:0; padding-top:123px; overflow:hidden; position:absolute; left:187px; top:149px;}
* html a#gs {height:123px; he\ight:0;}
a#gs:hover {background:transparent url(images/gsh.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*内蒙古*/
a#lmg {display:block; width:226px; height:0; padding-top:196px; overflow:hidden; position:absolute; left:234px; top:17px;}
* html a#lmg {height:196px; he\ight:0;}
a#lmg:hover {background:transparent url(images/lm.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*黑龙江*/
a#hlj {display:block; width:116px; height:0; padding-top:106px; overflow:hidden; position:absolute; left:420px; top:13px;}
* html a#hlj {height:106px; he\ight:0;}
a#hlj:hover {background:transparent url(images/hlj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*宁夏*/
a#nx {display:block; width:34px; height:0; padding-top:47px; overflow:hidden; position:absolute; left:290px; top:191px;}
* html a#nx {height:47px; he\ight:0;}
a#nx:hover {background:transparent url(images/nx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*吉林*/
a#jl {display:block; width:88px; height:0; padding-top:59px; overflow:hidden; positio
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全国地图-Download by http://www.codefans.net</title>
<style type="text/css">
/* The group of people */
*{text-align:center;}
#gmap {display:block; width:550px; height:617px; background:url(images/map.jpg) no-repeat; position:relative; margin:0 auto 2em auto;}
#gmap a {color:#000; font-family:arial, sans-serif; font-size:1.2em; font-weight:bold; text-transform:uppercase;}
a#title2, a#title2:visited {display:block; width:550px; height:617px; padding-top:260px; position:absolute; left:0; top:0; cursor:default; text-decoration:none;}
* html a#title2 {height:617px; he\ight:0;}/*IE6.0以下中显示*/
#gmap a#title2:hover {background:transparent url(group_col.gif) no-repeat 0 0; overflow:visible; color:#c00;}
/*新疆*/
a#xj {display:block; width:206px; height:0; padding-top:156px; overflow:hidden; position:absolute; left:14px; top:63px;}
* html a#xj {height:156px; he\ight:0;text-indent:-9000px;}
a#xj:hover {background:transparent url(images/xj1.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;}
/*西藏*/
a#xz {display:block; width:200px; height:0; padding-top:124px; overflow:hidden; position:absolute; left:37px; top:207px;}
* html a#xz {height:124px; he\ight:0;}
a#xz:hover {background:transparent url(images/xz.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;}
/*青海*/
a#qh {display:block; width:132px; height:0; padding-top:96px; overflow:hidden; position:absolute; left:147px; top:184px;}
* html a#qh {height:96px; he\ight:0;}
a#qh:hover {background:transparent url(images/qh.gif) no-repeat 0 0; height:-20px; overflow:visible;text-indent:-9000px;}
/*甘肃*/
a#gs {display:block; width:148px; height:0; padding-top:123px; overflow:hidden; position:absolute; left:187px; top:149px;}
* html a#gs {height:123px; he\ight:0;}
a#gs:hover {background:transparent url(images/gsh.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*内蒙古*/
a#lmg {display:block; width:226px; height:0; padding-top:196px; overflow:hidden; position:absolute; left:234px; top:17px;}
* html a#lmg {height:196px; he\ight:0;}
a#lmg:hover {background:transparent url(images/lm.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*黑龙江*/
a#hlj {display:block; width:116px; height:0; padding-top:106px; overflow:hidden; position:absolute; left:420px; top:13px;}
* html a#hlj {height:106px; he\ight:0;}
a#hlj:hover {background:transparent url(images/hlj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*宁夏*/
a#nx {display:block; width:34px; height:0; padding-top:47px; overflow:hidden; position:absolute; left:290px; top:191px;}
* html a#nx {height:47px; he\ight:0;}
a#nx:hover {background:transparent url(images/nx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}
/*吉林*/
a#jl {display:block; width:88px; height:0; padding-top:59px; overflow:hidden; positio
最低0.47元/天 解锁文章
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
