纯css 写的中国全车省份地图代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css 写的中国全车省份地图代码</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; height: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; height: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; height: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; height: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; height: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; height: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; height: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; height: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; position:absolute; left:436px; top:96px;}
* html a#jl {height:59px; height:0;}
a#jl:hover {background:transparent url(images/jl.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*辽宁*/
a#ln {display:block; width:61px; height:0; padding-top:53px; overflow:hidden; position:absolute; left:423px; top:129px;}
* html a#ln {height:53px; height:0;}
a#ln:hover {background:transparent url(images/ll.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*山东*/
a#sd {display:block; width:69px; height:0; padding-top:45px; overflow:hidden; position:absolute; left:396px; top:198px;}
* html a#sd {height:45px; height:0;}
a#sd:hover {background:transparent url(images/sd.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*河北*/
a#hb {display:block; width:58px; height:0; padding-top:81px; overflow:hidden; position:absolute; left:377px; top:146px;}
* html a#hb {height:81px; height:0;}
a#hb:hover {background:transparent url(images/heb.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*北京*/
a#bj {display:block; width:17px; height:0; padding-top:18px; overflow:hidden; position:absolute; left:394px; top:167px;}
* html a#bj {height:18px; height:0;}
a#bj:hover {background:transparent url(images/bj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*天津*/
a#tj {display:block; width:15px; height:0; padding-top:20px; overflow:hidden; position:absolute; left:406px; top:175px;}
* html a#tj {height:20px; height:0;}
a#tj:hover {background:transparent url(images/tj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*陕西*/
a#shx {display:block; width:55px; height:0; padding-top:93px; overflow:hidden; position:absolute; left:303px; top:188px;}
* html a#shx {height:93px; height:0;}
a#shx:hover {background:transparent url(images/shx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*山西*/
a#sx {display:block; width:37px; height:0; padding-top:73px; overflow:hidden; position:absolute; left:350px; top:173px;}
* html a#sx {height:73px; height:0;}
a#sx:hover {background:transparent url(images/sx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*河南*/
a#hn {display:block; width:62px; height:0; padding-top:56px; overflow:hidden; position:absolute; left:351px; top:224px;}
* html a#hn {height:56px; height:0;}
a#hn:hover {background:transparent url(images/hl.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*江苏*/
a#js {display:block; width:56px; height:0; padding-top:50px; overflow:hidden; position:absolute; left:409px; top:232px;}
* html a#js {height:50px; height:0;}
a#js:hover {background:transparent url(images/js.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*安徽*/
a#ah {display:block; width:52px; height:0; padding-top:63px; overflow:hidden; position:absolute; left:397px; top:239px;}
* html a#ah {height:63px; height:0;}
a#ah:hover {background:transparent url(images/ah.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*上海*/
a#sh {display:block; width:10px; height:0; padding-top:7px; overflow:hidden; position:absolute; left:460px; top:273px;}
* html a#sh {height:7px; height:0;}
a#sh:hover {background:transparent url(images/sh.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*浙江*/
a#zj {display:block; width:40px; height:0; padding-top:50px; overflow:hidden; position:absolute; left:433px; top:275px;}
* html a#zj {height:50px; height:0;}
a#zj:hover {background:transparent url(images/zj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*江西*/
a#jx {display:block; width:51px; height:0; padding-top:67px; overflow:hidden; position:absolute; left:388px; top:297px;}
* html a#jx {height:67px; height:0;}
a#jx:hover {background:transparent url(images/jx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*福建*/
a#hj {display:block; width:47px; height:0; padding-top:59px; overflow:hidden; position:absolute; left:414px; top:313px;}
* html a#hj {height:59px; height:0;}
a#hj:hover {background:transparent url(images/hj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*广东*/
a#gd {display:block; width:81px; height:0; padding-top:63px; overflow:hidden; position:absolute; left:350px; top:352px;}
* html a#gd {height:63px; height:0;}
a#gd:hover {background:transparent url(images/gd.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*海南*/
a#hl {display:block; width:25px; height:0; padding-top:21px; overflow:hidden; position:absolute; left:338px; top:418px;}
* html a#hl {height:21px; height:0;}
a#hl:hover {background:transparent url(images/hal.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*广西*/
a#gx {display:block; width:80px; height:0; padding-top:59px; overflow:hidden; position:absolute; left:294px; top:343px;}
* html a#gx {height:59px; height:0;}
a#gx:hover {background:transparent url(images/gx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*贵州*/
a#gz {display:block; width:62px; height:0; padding-top:52px; overflow:hidden; position:absolute; left:284px; top:312px;}
* html a#gz {height:52px; height:0;}
a#gz:hover {background:transparent url(images/gz.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*云南*/
a#yn {display:block; width:92px; height:0; padding-top:92px; overflow:hidden; position:absolute; left:218px; top:313px;}
* html a#yn {height:92px; height:0;}
a#yn:hover {background:transparent url(images/yn.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*四川*/
a#sc {display:block; width:111px; height:0; padding-top:96px; overflow:hidden; position:absolute; left:222px; top:250px;}
* html a#sc {height:96px; height:0;}
a#sc:hover {background:transparent url(images/sc.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*重庆*/
a#cq {display:block; width:51px; height:0; padding-top:47px; overflow:hidden; position:absolute; left:299px; top:275px;}
* html a#cq {height:47px; height:0;}
a#cq:hover {background:transparent url(images/chq.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*湖南*/
a#hun {display:block; width:56px; height:0; padding-top:65px; overflow:hidden; position:absolute; left:339px; top:298px;}
* html a#hun {height:65px; height:0;}
a#hun:hover {background:transparent url(images/hn.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*湖北*/
a#hub {display:block; width:82px; height:0; padding-top:49px; overflow:hidden; position:absolute; left:332px; top:261px;}
* html a#hub {height:49px; height:0;}
a#hub:hover {background:transparent url(images/hb.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

/*台湾*/
a#tw {display:block; width:17px; height:0; padding-top:40px; overflow:hidden; position:absolute; left:462px; top:347px;}
* html a#tw {height:40px; height:0;}
a#tw:hover {background:transparent url(images/tw.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;}

</style>
</head>

<body>
<div>
 <dl id="gmap">
  <dt><a id="title2" href="#nogo"></a></dt>
  <dd><a id="xj" title="新疆" href="#">新疆</a></dd> 
  <dd><a id="xz" title="西藏" href="#">西藏</a></dd>
  <dd><a id="qh" title="青海" href="#">青海</a></dd>  
  <dd><a id="gs" title="甘肃" href="#">甘肃</a></dd>
  <dd><a id="lmg" title="内蒙古" href="#">内蒙古</a></dd>
  <dd><a id="hlj" title="黑龙江" href="#">黑龙江</a></dd> 
  <dd><a id="jl" title="吉林" href="#">吉林</a></dd>
  <dd><a id="ln" title="辽宁" href="#">辽宁</a></dd>
  <dd><a id="sd" title="山东" href="#">山东</a></dd>
  <dd><a id="hb" title="河北" href="#">河北</a></dd>
  <dd><a id="sx" title="山西" href="#">山西</a></dd>
  <dd><a id="bj" title="北京" href="#">北京</a></dd>
  <dd><a id="tj" title="天津" href="#">天津</a></dd>
  <dd><a id="shx" title="陕西" href="#">陕西</a></dd>  
  <dd><a id="nx" title="宁夏" href="#">宁夏</a></dd> 
  <dd><a id="hn" title="河南" href="#">河南</a></dd> 
  <dd><a id="js" title="江苏" href="#">江苏</a></dd>
  <dd><a id="ah" title="安徽" href="#">安徽</a></dd>
  <dd><a id="sh" title="上海" href="#">上海</a></dd>
  <dd><a id="zj" title="浙江" href="#">浙江</a></dd> 
  <dd><a id="jx" title="江西" href="#">江西</a></dd>
  <dd><a id="hj" title="福建" href="#">福建</a></dd>
  <dd><a id="gd" title="广东" href="#">广东</a></dd>
  <dd><a id="hl" title="海南" href="#">海南</a></dd>
  <dd><a id="gx" title="广西" href="#">广西</a></dd> 
  <dd><a id="gz" title="贵州" href="#">贵州</a></dd>
  <dd><a id="yn" title="云南" href="#">云南</a></dd> 
  <dd><a id="sc" title="四川" href="#">四川</a></dd>
  <dd><a id="cq" title="重庆" href="#l">重庆</a></dd>
  <dd><a id="hun" title="湖南" href="#">湖南</a></dd>  
  <dd><a id="hub" title="湖北" href="#">湖北</a></dd>
  <dd><a id="tw" title="台湾" href="#">台湾</a></dd>
  <!--<dd><a id="xg" title="香港" href="#">香港</a></dd>
  <dd><a id="am" title="澳门" href="#">澳门</a></dd> 
  -->  
 </dl>
</div>
效果地址:
http://g.111cn.net/javascript/flash/20100423/jsmap
下载地址:
http://down.111cn.net/down/code/js/2010/0423/17828.html
由中WEB第一站 www.111cn.net提供下载
</body>
</html>

 

时间: 2024-08-03 08:57:15

纯css 写的中国全车省份地图代码的相关文章

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯css写出tips的几种方法

最近在项目中用到了很多的小tips,之前都是随便找一套UI控件拿过来用一下就算完事了,一直也没有去管这个东西究竟是怎么搞出来的,只是大概知 道这个东西怎么实现的,但是一套UI毕竟是太大了,tips也就是那些UI的一些附属品,没必要这么兴师动众,而且想想这些小玩意也都上样式上的事情,就 决定自己就地解决一个算了,很自然的就引出了今天这篇文章... 主要的tips就长如下图这德行,就是个demo,所以比较丑.. 今天的主题就是这个小小的tips,但是还是有点文章可以做的,我主要介绍三种方法,可能还有

1.2 中国云创省份地图

图 1:       2015年中国云创能力分布 资料来源:阿里研究院,阿里云,2015(本图仅为示意图,非真实地图)     以省级地区为单位,全国云上的创新效能与资源聚集在北京.广东.浙江.上海四个地区,其消耗的云计算资源.使用的数据规模.交互的网络流量都远高于其他地区,成为DT中国名副其实的"创新高地",北京在云计算力.数据规模.云服务投资三方面遥遥领先,广东省的云应用创新与需求十分活跃,浙江省.上海各方面发展相对均衡:另一方面,江苏.山东.福建.四川.河南的创新能力正在迅速崛起

纯css实现漂亮的提交表单效果代码

Name图库 E-mail图库 Website图库

纯CSS实现小箭头的案例

我们大多数的小箭头都是用小图片来做的,这里分享一款用纯CSS写的小箭头,大家可以看看,以后会放出更多的CSS小箭头来供大家参考. <div class="pre-wrap">     <div class="pre">         <div class="pre1"></div>         <div class="pre2"></div>    

纯CSS实现聊天泡泡

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript. 聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript.而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建,并用CSS3来增强效果.不使用图片,也不使用JavaScript和更加不使用当前语义没用到的HTML哦. 在CSS文件中有大量对代码的注释,可以让你方便的看懂这些代码.(译者:在翻译时作

纯CSS绘制三角形箭头效果

  最近我想修改一下这个网站,我想在上面放置一个提示框.这是很容易,但我想让提示框上有一个三角形的箭头.可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难.幸运的是,MooTools的核心开发着Darren Waddell告诉了我一个非常棒 使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码 复制代码 代码如下: /* create an arrow that points up */ div.arrow-up { widt

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!_经验交流

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程! 下面代码有点多!但做出来你肯定喜欢! 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!我不想废话了,开门见山吧. 先看演示 :http://www.gz7y.com   点精彩推荐即可看见! 如果下面代码你看不懂或者做不出来,明天等待我的视频吧. CSS如下: <STYLE type=text/css> <!-- #f_div{width:230px; height:205px; margin:0 auto; ov

CSS+DIV设计实例:纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis