不用热区和介绍，用DIV+CSS实现地图

这个是以前客齐集首页的地图效果，使用div+css来做的中国地图。通常这样的情况,在最早,我可能用FLASH或热点来完成。1.FLASH不利于SEO.面且如果用户的电脑没有安FLASH插件,也是没有办法看到的.更别说用手机上网的用户了。2.然后就是用热点来作.每个城市的热区.都会通过上下左右四个值来计算.而且鼠标放上去还没有什么效果.这样感觉不爽.最主要的是代码不比这样作少.可能还会多一些.。

由于.就有了下边的效果.虽然用这样的方式制作过程比正常多出约1/3的时间.但效果还是不错的.而且有利于SEO.我把正常情况的图片和鼠标移上去的效果图片写成一个了.这样.用户把鼠标移上去后出现的图片不用重新加载. 比较流畅. 

演示效果截图

用到的图片

CSS代码

#main {
MARGIN: 10px auto 0px; WIDTH: 950px; TEXT-ALIGN: left}
#map {
BACKGROUND: url(map.gif) no-repeat left top;
FLOAT: left; WIDTH: 552px; HEIGHT: 447px}
#map H1 {
DISPLAY: block; FONT-WEIGHT: normal;POSITION: absolute}
.mapl A:link {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapl A:visited {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapr A:link {
DISPLAY: block; BACKGROUND: urlmaph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapr A:visited {
DISPLAY: block; BACKGROUND: url(maph1.gif) no-repeat;
COLOR: #000; TEXT-DECORATION: none}
.mapl A:link {
BACKGROUND-POSITION: left 4px; PADDING-LEFT: 20px}
.mapl A:visited {
BACKGROUND-POSITION: left 4px; PADDING-LEFT: 20px}
.mapr A:link {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right 4px}
.mapr A:visited {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right 4px}
.mapl A:hover {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
.mapl A:active {
PADDING-RIGHT: 20px; DISPLAY: block;
BACKGROUND: url(maph1.gif) no-repeat; COLOR: #ff0000}
.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}
#map .mapr A:hover {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right bottom}
#map .mapr A:active {
PADDING-RIGHT: 20px; BACKGROUND-POSITION: right bottom}
#map .mapl A:hover {
BACKGROUND-POSITION: left bottom;PADDING-LEFT: 20px}
#map .mapl A:active {
BACKGROUND-POSITION: left bottom;PADDING-LEFT: 20px}
H1 {
PADDING-RIGHT: 0px;PADDING-LEFT: 0px;FONT-SIZE: 12px;PADDING-BOTTOM: 0px;
MARGIN: 0px; WORD-SPACING: 0px; PADDING-TOP: 0px; LETTER-SPACING: 0px}
BODY {
FONT-SIZE: 12px; BACKGROUND: #fff; COLOR: #666; LINE-HEIGHT: 1.8;
FONT-FAMILY: Verdana, "宋体", Arial,Sans; TEXT-ALIGN: center}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px}

HTML代码

<DIV id=wrapper>
<DIV id=main>
<DIV id=map>
<H1 style="FONT-SIZE: 14px; font-weight:bold;
MARGIN: 90px 0px 0px 220px">www.865171.cn</H1>
<H1 class=mapl style="MARGIN: 162px 0px 0px 396px"><A 
style="FONT-WEIGHT: bold; COLOR: #ff0000" 
href="http://url">北京 </A></H1>
<H1 class=mapl style="MARGIN: 110px 0px 0px 465px"><A 
href="http://url">长春 </A></H1>
<H1 class=mapr style="MARGIN: 165px 0px 0px 305px"><A 
href="http://url">呼和浩特 </A></H1>
<H1 class=mapr style="MARGIN: 293px 0px 0px 255px"><A 
href="http://url">成都 </A></H1>
<H1 class=mapr style="MARGIN: 285px 0px 0px 300px"><A 
href="http://url">重庆 </A></H1>
<H1 class=mapl style="MARGIN: 154px 0px 0px 439px"><A 
href="http://url">大连 </A></H1>
<H1 class=mapr style="MARGIN: 370px 0px 0px 366px"><A 
href="http://url">广州 </A></H1>
<H1 class=mapl style="MARGIN: 338px 0px 0px 305px"><A 
href="http://url">贵阳 </A></H1>
<H1 class=mapl style="MARGIN: 420px 0px 0px 342px"><A 
href="http://url">海口 </A></H1>
<H1 class=mapl style="MARGIN: 79px 0px 0px 489px"><A 
href="http://url">哈尔滨 </A></H1>
<H1 class=mapl style="MARGIN: 296px 0px 0px 445px"><A 
href="http://url">杭州 </A></H1>
<H1 class=mapr style="MARGIN: 261px 0px 0px 393px"><A 
href="http://url">合肥 </A></H1>
<H1 class=mapr style="MARGIN: 206px 0px 0px 383px"><A 
href="http://url">济南 </A></H1>
<H1 class=mapr style="MARGIN: 359px 0px 0px 237px"><A 
href="http://url">昆明 </A></H1>
<H1 class=mapr style="MARGIN: 222px 0px 0px 264px"><A 
href="http://url">兰州 </A></H1>
<H1 class=mapr style="Z-INDEX: 100; MARGIN: 250px 0px 0px 342px"><A 
href="http://url">洛阳 </A></H1>
<H1 class=mapl style="MARGIN: 317px 0px 0px 360px"><A 
href="http://url">长沙</A></H1>
<H1 class=mapl style="MARGIN: 317px 0px 0px 405px"><A 
href="http://url">南昌 </A></H1>
<H1 class=mapl style="MARGIN: 255px 0px 0px 430px"><A 
href="http://url">南京 </A></H1>
<H1 class=mapl style="MARGIN: 229px 0px 0px 418px"><A 
href="http://url">徐州 </A></H1>
<H1 class=mapl style="MARGIN: 214px 0px 0px 433px"><A 
href="http://url">青岛 </A></H1>
<H1 class=mapl style="Z-INDEX: 99; MARGIN: 366px 0px 0px 400px"><A 
href="http://url">汕头 </A></H1>
<H1 class=mapl style="MARGIN: 280px 0px 0px 458px"><A 
style="FONT-WEIGHT: bold; COLOR: #ff0000" 
href="http://url">上海 </A></H1>
<H1 class=mapl style="MARGIN: 383px 0px 0px 392px"><A 
href="http://url">深圳 </A></H1>
<H1 class=mapr style="MARGIN: 138px 0px 0px 433px"><A 
href="http://url">沈阳 </A></H1>
<H1 class=mapr style="MARGIN: 191px 0px 0px 355px"><A 
href="http://url">石家庄 </A></H1>
<H1 class=mapl style="MARGIN: 270px 0px 0px 430px"><A 
href="http://url">无锡 </A></H1>
<H1 class=mapr style="MARGIN: 272px 0px 0px 390px"><A 
href="http://url">马鞍山 </A></H1>
<H1 class=mapr style="MARGIN: 204px 0px 0px 338px"><A 
href="http://url">太原 </A></H1>
<H1 class=mapl style="MARGIN: 176px 0px 0px 408px"><A 
href="http://url">天津 </A></H1>
<H1 class=mapl style="MARGIN: 115px 0px 0px 145px"><A 
href="http://url">乌鲁木齐 </A></H1>
<H1 class=mapr style="MARGIN: 277px 0px 0px 357px"><A 
href="http://url">武汉 </A></H1>
<H1 class=mapr style="MARGIN: 263px 0px 0px 347px"><A 
href="http://url">南阳 </A></H1>
<H1 class=mapr style="MARGIN: 238px 0px 0px 314px"><A 
href="http://url">西安 </A></H1>
<H1 class=mapl style="MARGIN: 353px 0px 0px 424px"><A 
href="http://url">厦门 </A></H1>
<H1 class=mapl style="MARGIN: 189px 0px 0px 438px"><A 
href="http://url">烟台 </A></H1>
<H1 class=mapl style="MARGIN: 235px 0px 0px 377px"><A 
href="http://url">郑州 </A></H1>
<H1 class=mapr style="MARGIN: 225px 0px 0px 350px"><A 
href="http://url">焦作 </A></H1>
<H1 class=mapr style="MARGIN: 383px 0px 0px 355px"><A 
href="http://url">珠海 </A></H1>
<H1 class=mapl style="MARGIN: 200px 0px 0px 415px"><A 
href="http://url">淄博 </A></H1>
<H1 class=mapl style="MARGIN: 335px 0px 0px 435px"><A 
href="http://url">福州 </A></H1>
<H1 class=mapl style="MARGIN: 375px 0px 0px 315px"><A 
href="http://url">南宁 </A></H1></DIV>
</DIV>
</DIV>