<! 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> Map code for all provinces in China written in pure 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;}/* Display in IE6.0 or below */
# Gmap a # title2: hover {background: transparent url(group_col.gif) no-repeat 0 0; overflow: visible; color: # c00 ;}
/* Xinjiang */
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 ;}
/* Tibet */
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 ;}
/* Qinghai */
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 ;}
/* Gansu */
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 ;}
/* Inner Mongolia */
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 ;}
/* Heilongjiang */
A # hlj {display: block; width: Pixel px; height: 0; padding-top: Pixel; overflow: hidden; position: absolute; left: 420px; top: 13px ;}
* Html a # hlj {height: Pixel px; height: 0 ;}
A # hlj: hover {background: transparent url (images/hlj.gif) no-repeat 0 0; overflow: visible; text-indent:-9000px ;}
/* Ningxia */
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 ;}
/* Jilin */
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 ;}
/* Liaoning */
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 ;}
/* Shandong */
A # sd {display: block; width: 69px; height: 0; padding-top: 45px; overflow: hidden; position: absolute; left: Pixel px; 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 ;}
/* Hebei */
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 ;}
/* Beijing */
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 ;}
/* Tianjin */
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 ;}
/* Shaanxi */
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 ;}
/* Shanxi */
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 ;}
/* Henan */
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 ;}
/* Jiangsu */
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 ;}
/* Anhui */
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 ;}
/* Shanghai */
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 ;}
/* Zhejiang */
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 ;}
/* Jiangxi */
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 ;}
/* Fujian */
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 ;}
/* Guangdong */
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 ;}
/* Hainan */
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 ;}
/* Guangxi */
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 ;}
/* Guizhou */
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 ;}
/* Yunnan */
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 ;}
/* Sichuan */
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 ;}
/* Chongqing */
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 ;}
/* Hunan */
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 ;}
/* Hubei */
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 ;}
/* Taiwan */
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 = "Xinjiang" href = "#"> Xinjiang </a> </dd>
<Dd> <a id = "xz" title = "Tibet" href = "#"> Tibet </a> </dd>
<Dd> <a id = "qh" title = "Qinghai" href = "#"> Qinghai </a> </dd>
<Dd> <a id = "gs" title = "Gansu" href = "#"> Gansu </a> </dd>
<Dd> <a id = "lmg" title = "Inner Mongolia" href = "#"> Inner Mongolia </a> </dd>
<Dd> <a id = "hlj" title = "Heilongjiang" href = "#"> Heilongjiang </a> </dd>
<Dd> <a id = "jl" title = "Jilin" href = "#"> Jilin </a> </dd>
<Dd> <a id = "ln" title = "Liaoning" href = "#"> Liaoning </a> </dd>
<Dd> <a id = "sd" title = "Shandong" href = "#"> Shandong </a> </dd>
<Dd> <a id = "hb" title = "Hebei" href = "#"> Hebei </a> </dd>
<Dd> <a id = "sx" title = "Shanxi" href = "#"> Shanxi </a> </dd>
<Dd> <a id = "bj" title = "Beijing" href = "#"> Beijing </a> </dd>
<Dd> <a id = "tj" title = "Tianjin" href = "#"> Tianjin </a> </dd>
<Dd> <a id = "shx" title = "Shaanxi" href = "#"> Shaanxi </a> </dd>
<Dd> <a id = "nx" title = "Ningxia" href = "#"> Ningxia </a> </dd>
<Dd> <a id = "hn" title = "Henan" href = "#"> Henan </a> </dd>
<Dd> <a id = "js" title = "Jiangsu" href = "#"> Jiangsu </a> </dd>
<Dd> <a id = "ah" title = "Anhui" href = "#"> Anhui </a> </dd>
<Dd> <a id = "sh" title = "Shanghai" href = "#"> Shanghai </a> </dd>
<Dd> <a id = "zj" title = "Zhejiang" href = "#"> Zhejiang </a> </dd>
<Dd> <a id = "jx" title = "Jiangxi" href = "#"> Jiangxi </a> </dd>
<Dd> <a id = "hj" title = "Fujian" href = "#"> Fujian </a> </dd>
<Dd> <a id = "gd" title = "Guangdong" href = "#"> Guangdong </a> </dd>
<Dd> <a id = "hl" title = "Hainan" href = "#"> Hainan </a> </dd>
<Dd> <a id = "gx" title = "Guangxi" href = "#"> Guangxi </a> </dd>
<Dd> <a id = "gz" title = "Guizhou" href = "#"> Guizhou </a> </dd>
<Dd> <a id = "yn" title = "Yunnan" href = "#"> Yunnan </a> </dd>
<Dd> <a id = "SC" title = "Sichuan" href = "#"> Sichuan </a> </dd>
<Dd> <a id = "cq" title = "Chongqing" href = "# l"> Chongqing </a> </dd>
<Dd> <a id = "hun" title = "Hunan" href = "#"> Hunan </a> </dd>
<Dd> <a id = "hub" title = "Hubei" href = "#"> Hubei </a> </dd>
<Dd> <a id = "tw" title = "Taiwan" href = "#"> Taiwan </a> </dd>
<! -- <Dd> <a id = "xg" title = "Hong Kong" href = "#"> Hong Kong </a> </dd>
<Dd> <a id = "am" title = "Macao" href = "#"> Macao </a> </dd>
-->
</Dl>
</Div>
Effect address:
Http://g.111cn.net/javascript/flash/20100423/jsmap
Download address:
Http://down.111cn.net/down/code/js/2010/0423/17828.html
Download from www.111cn.net
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
