首页

通过css和html实现上海完整区县版块效果图前端源码下载(兼容主流浏览器)

标签:地图,map,web模板,css,效果图,区县板块,悬浮,flash,开源,前端,html     发布时间:2016-08-18   

一、源码描述

该源码是通过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>

2. 预览效果如下

  • 云盘下载:
  • 本地下载: