html div里面调用地图,DIV+CSS实现地图效果

1.FLASH不利于SEO.面且如果用户的电脑没有安FLASH插件,也是没有办法看到的.更别说用手机上网的用户了.

2.然后就是用热点来作.每个城市的热区.都会通过上下左右四个值来计算.而且鼠标放上去还没有什么效果.这样感觉不爽.最主要的是代码不比这样作少.可能还会多一些.

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

你可以点一下后边看一下:

以下是CSS的代码:

程序代码

以下为引用的内容：

#map{ background:url(/cg_img/map.gif) no-repeat left top; height:447px; width:552px; float:left;}

#map h1{ position:absolute;font-weight:normal; display:block}

.mapl a:link,.mapl a:visited,.mapr a:link,.mapr a:visited{color:#000;text-decoration:none;display:block;background: url(/cg_img/maph1.gif);background-repeat: no-repeat;}

.mapl a:link,.mapl a:visited{padding-left:20px;background-position: left 4px;}

.mapr a:link,.mapr a:visited{padding-right:20px;background-position: right 4px;}

.mapl a:hover,.mapl a:active,.mapr a:hover,.mapr a:active{color: #FF0000;padding-right:20px;display:block;background: url(/cg_img/maph1.gif);background-repeat: no-repeat;}

#map .mapr a:hover,#map .mapr a:active{background-position: right bottom;padding-right:20px;}

#map .mapl a:hover,#map .mapl a:active{background-position: left bottom;padding-left:20px;}

由于城市名称的有时在图的左边.有时在右边.所以写了两个CLASS; 代码还能再优化一点. 但考虑优化过的代码后期维护比较麻烦. 所以没有更细的优化. 只是简写了一些CSS.

这样的效果不知道有没有更好的办法来实现?