一、源码描述
该源码是通过HTML+CSS来实现上海市各个区县板块动态效果示意图，能很好的兼容主流浏览器，同时比用adobe flash的兼容效果要好的多（ipad或mac上预览效果..）
二、源码及效果预览
1. html页源码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">@b@<html xmlns="http://www.w3.org/1999/xhtml">@b@<head>@b@<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> @b@<style>@b@*{margin:0; padding:0; list-style:none;} @b@ body {margin:0; background-color:#D7EFF9; padding:0;font:normal 12px/21px Verdana;text-align:center;font-family:"Microsoft YaHei","SimSun","Arial Narrow";}@b@ div{margin:0 auto;padding:0px;}@b@ li{list-style-type:none;}@b@#LayerCmx {@b@ position:absolute;@b@ width:567px;@b@ height:291px;@b@ z-index:1;@b@ left: 611px;@b@ top: 6px;@b@}@b@#LayerBsq {@b@ position:absolute;@b@ width:195px;@b@ height:161px;@b@ z-index:2;@b@ left: 561px;@b@ top: 150px;@b@}@b@#LayerJdq {@b@ position:absolute;@b@ width:153px;@b@ height:218px;@b@ z-index:3;@b@ left: 421px;@b@ top: 180px;@b@}@b@#Layerqpq {@b@ position:absolute;@b@ width:275px;@b@ height:269px;@b@ z-index:4;@b@ left: 240px;@b@ top: 340px;@b@}@b@#Layerjsq{@b@ position:absolute;@b@ width:246px;@b@ height:163px;@b@ z-index:4;@b@ left: 280px;@b@ top: 640px;@b@}@b@#Layersjq{@b@ position:absolute;@b@ width:246px;@b@ height:163px;@b@ z-index:5;@b@ left: 350px;@b@ top: 480px;@b@}@b@#Layerpdxq{@b@ position:absolute;@b@ width:394px;@b@ height:371px;@b@ z-index:6;@b@ left: 730px;@b@ top: 320px;@b@}@b@#Layerypq{@b@ position:absolute;@b@ width:61px;@b@ height:96px;@b@ z-index:7;@b@ left: 750px;@b@ top: 270px;@b@}@b@@b@#Layerhkq{@b@ position:absolute;@b@ width:60px;@b@ height:81px;@b@ z-index:8;@b@ left: 710px;@b@ top: 300px;@b@}@b@@b@#Layerhpq{@b@ position:absolute;@b@ width:49px;@b@ height:74px;@b@ z-index:9;@b@ left: 720px;@b@ top: 390px;@b@}@b@@b@#Layerxhq{@b@ position:absolute;@b@ width:60px;@b@ height:113px;@b@ z-index:10;@b@ left: 660px;@b@ top: 420px;@b@}@b@@b@#Layermhq{@b@ position:absolute;@b@ width:174px;@b@ height:202px;@b@ z-index:11;@b@ left: 520px;@b@ top: 450px;@b@}@b@@b@#Layercnq{@b@ position:absolute;@b@ width:86px;@b@ height:62px;@b@ z-index:12;@b@ left: 580px;@b@ top: 400px;@b@}@b@@b@#Layerptq{@b@ position:absolute;@b@ width:103px;@b@ height:79px;@b@ z-index:13;@b@ left: 580px;@b@ top: 330px;@b@}@b@@b@#Layerxhq{@b@ position:absolute;@b@ width:60px;@b@ height:113px;@b@ z-index:14;@b@ left: 660px;@b@ top: 420px;@b@}@b@@b@#Layerjaq{@b@ position:absolute;@b@ width:45px;@b@ height:38px;@b@ z-index:15;@b@ left: 670px;@b@ top: 384px;@b@}@b@@b@#Layerzbq{@b@ position:absolute;@b@ width:71px;@b@ height:93px;@b@ z-index:16;@b@ left: 650px;@b@ top: 294px;@b@}@b@@b@#Layerfxq{@b@ position:absolute;@b@ width:236px;@b@ height:185px;@b@ z-index:17;@b@ left: 600px;@b@ top: 568px;@b@} @b@</style>@b@<script type="text/javascript">@b@ @b@ function ImgMouseOver(ID){@b@ document.getElementById(ID).src="images/"+ID+"_hover.gif"; @b@ }@b@ @b@ function ImgMouseOut(ID){@b@ document.getElementById(ID).src="images/"+ID+".gif"; @b@ }@b@</script>@b@</head> @b@<body> @b@<div id="LayerCmx"><a href="http://www.xwood.net" target="_blank"><img src="images/cmx.gif" name="cmx" width="520" height="377" border="0" id="cmx" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="LayerBsq"><a href="http://www.xwood.net" target="_blank"><img src="images/bsq.gif" name="bsq" width="195" height="161" border="0" id="bsq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="LayerJdq"><a href="http://www.xwood.net" target="_blank"><img src="images/jdq.gif" name="jdq" width="153" height="213" border="0" id="jdq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerqpq"><a href="http://www.xwood.net" target="_blank"><img src="images/qpq.gif" name="qpq" width="275" height="269" border="0" id="qpq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerjsq"><a href="http://www.xwood.net" target="_blank"><img src="images/jsq.gif" name="jsq" width="346" height="163" border="0" id="jsq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layersjq"><a href="http://www.xwood.net" target="_blank"><img src="images/sjq.gif" name="sjq" width="170" height="186" border="0" id="sjq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerpdxq"><a href="http://www.xwood.net" target="_blank"><img src="images/pdxq.gif" name="pdxq" width="394" height="371" border="0" id="pdxq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerypq"><a href="http://www.xwood.net" target="_blank"><img src="images/ypq.gif" name="ypq" width="61" height="96" border="0" id="ypq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerzbq"><a href="http://www.xwood.net" target="_blank"><img src="images/zbq.gif" name="zbq" width="60" height="81" border="0" id="zbq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerhpq"><a href="http://www.xwood.net" target="_blank"><img src="images/hpq.gif" name="hpq" width="49" height="74" border="0" id="hpq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layermhq"><a href="http://www.xwood.net" target="_blank"><img src="images/mhq.gif" name="mhq" width="174" height="202" border="0" id="mhq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layercnq"><a href="http://www.xwood.net" target="_blank"><img src="images/cnq.gif" name="cnq" width="86" height="62" border="0" id="cnq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerptq"><a href="http://www.xwood.net" target="_blank"><img src="images/ptq.gif" name="ptq" width="103" height="79" border="0" id="ptq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerxhq"><a href="http://www.xwood.net" target="_blank"><img src="images/xhq.gif" name="xhq" width="60" height="113" border="0" id="xhq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerjaq"><a href="http://www.xwood.net" target="_blank"><img src="images/jaq.gif" name="jaq" width="45" height="38" border="0" id="jaq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerhkq"><a href="http://www.xwood.net" target="_blank"><img src="images/hkq.gif" name="hkq" width="71" height="93" border="0" id="hkq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@<div id="Layerfxq"><a href="http://www.xwood.net" target="_blank"><img src="images/fxq.gif" name="fxq" width="236" height="185" border="0" id="fxq" onmouseover="ImgMouseOver(this.id)" onmouseout="ImgMouseOut(this.id)" /></a></div>@b@@b@</body>@b@</html>