jQuery焦点中国地图

 

 

以下为上图代码实例：

<style>

body {margin:0;padding:0;}

#dataMap {position:relative;margin:0 auto;width:552px;height:447px;font-size:12px;background:url(http://home.51cto.com/data/uploads/20110719/15/4e252f9ee41f8.gif) no-repeat left top;}

#dataMap span {position:absolute;}

#dataMap a {display:block;padding-left:20px;line-height:1.8;text-decoration:none;color:#000;background:url(http://home.51cto.com/data/uploads/20110719/15/4e252f9eb3cd6.gif) no-repeat left 4px;}

#dataMap a:hover,#dataMap a:active {color:#f00;background-position:left bottom;}

#dataMap a.hotcity {color:#f00;font-weight:700;}

#dataMap em {display:none;}

.dataTip {display:none;position:absolute;z-index:9999;font-size:12px;padding:0 3px;border:1px solid #000;background-color:#ffc;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(function(){

    $("#dataMap a").mousemove(function(e){$("#dataTip").html($(this).next().html()+"篇相关文章").css({"left":e.pageX+10+"px","top":e.pageY-15+"px"}).show()}).mouseout(function(){$("#dataTip").hide();});

})

</script>

<div id="dataMap">

        <span style="top:162px;left:392px"><a href="#" class="hotcity">北京</a><em>9999</em></span>

        <span style="top:110px;left:465px;"><a href="#">吉林</a><em>9999</em></span>

        <span style="top:165px;left:305px"><a href="#">内蒙古</a><em>9999</em></span>

        <span style="top:260px;left:120px"><a href="#">西藏</a><em>9999</em></span>

        <span style="top:293px;left:255px"><a href="#">四川</a><em>9999</em></span>

        <span style="top:290px;left:310px"><a href="#">重庆</a><em>9999</em></span>

        <span style="top:365px;left:380px"><a href="#">广东</a><em>9999</em></span>

        <span style="top:335px;left:295px"><a href="#">贵州</a><em>9999</em></span>

        <span style="top:420px;left:342px"><a href="#">海南</a><em>9999</em></span>



        <span style="top:70px;left:460px"><a href="#">黑龙江</a><em>9999</em></span>

        <span style="top:296px;left:445px"><a href="#">浙江</a><em>9999</em></span>

        <span style="top:265px;left:410px"><a href="#">安徽</a><em>9999</em></span>

        <span style="top:206px;left:400px"><a href="#">山东</a><em>9999</em></span>

        <span style="top:359px;left:237px"><a href="#">云南</a><em>9999</em></span>

        <span style="top:222px;left:180px"><a href="#">青海</a><em>9999</em></span>

        <span style="top:165px;left:200px"><a href="#">甘肃</a><em>9999</em></span>

        <span style="top:200px;left:300px"><a href="#">宁夏</a><em>9999</em></span>

        <span style="top:317px;left:343px"><a href="#">湖南</a><em>9999</em></span>



        <span style="top:317px;left:400px"><a href="#">江西</a><em>9999</em></span>

        <span style="top:250px;left:435px"><a href="#">江苏</a><em>9999</em></span>

        <span style="top:280px;left:458px"><a href="#" class="hotcity">上海</a><em>9999</em></span>

        <span style="top:385px;left:355px"><a href="#">澳门</a><em>9999</em></span>

        <span style="top:383px;left:392px"><a href="#">香港</a><em>9999</em></span>

        <span style="top:138px;left:433px"><a href="#">辽宁</a><em>9999</em></span>

        <span style="top:190px;left:380px"><a href="#">河北</a><em>9999</em></span>

        <span style="top:210px;left:350px"><a href="#">山西</a><em>9999</em></span>

        <span style="top:176px;left:408px"><a href="#">天津</a><em>9999</em></span>



        <span style="top:130px;left:125px"><a href="#">新疆</a><em>9999</em></span>

        <span style="top:277px;left:357px"><a href="#">湖北</a><em>9999</em></span>

        <span style="top:240px;left:310px"><a href="#">陕西</a><em>9999</em></span>

        <span style="top:240px;left:360px"><a href="#">河南</a><em>9999</em></span>

        <span style="top:340px;left:420px"><a href="#">福建</a><em>9999</em></span>

        <span style="top:360px;left:460px"><a href="#">台湾</a><em>9999</em></span>

        <span style="top:375px;left:315px"><a href="#">广西</a><em>9999</em></span>

    </div>

    <div id="dataTip" class="dataTip"></div>

 

上图代码示例，所需其它文件在附件中：

<HTML lang=ch style="HEIGHT: 100%"
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="swfobject.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
    function eventHandler(e) {
        alert(e.value);
    }
</SCRIPT>

<META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD>
<BODY id=player>
<DIV id=container>Get the Flash Player to see this player</DIV>
<SCRIPT type=text/javascript>
        var s1 = new SWFObject("ChinaMap.swf","ply","600","500","10","#FFFFFF");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allownetworking","all");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("wmode","transparent");
        s1.addVariable("title","中华人民共和国");
        s1.addVariable("xmlurl","d.xml");
        s1.addVariable("jsHandler","eventHandler");
        s1.write("container");
    </SCRIPT>
</BODY></HTML>

 

 

 

 

纯Flash版本，调整起来多有不便。

<html>
<head><title>Flash版彩色中国地图</title></head>
<body>
<p><embed menu="true" loop="true" play="true" type="application/x-shockwave-flash" height="500" width="500" src="map.swf"></embed></p>
</body>
</html>

 

 

<HTML lang=zh><HEAD><TITLE>中国分省市地图导航-SVG格式（基于Raphaël）</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK
href="style.css" type=text/css rel=stylesheet>
<SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT>

<SCRIPT src="raphael.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
                //预留作为初始化打开显示的省份
        var current = null;
    </SCRIPT>

<SCRIPT src="chinamap.js" type=text/javascript></SCRIPT>

<STYLE>
#ChinaMap {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 560px; PADDING-TOP: 10px; POSITION: relative; TEXT-ALIGN: center
}
#tiplayer {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 1000; MIN-HEIGHT: 1em; BACKGROUND: #000; MAX-WIDTH: 250px; PADDING-BOTTOM: 5px; FONT: 12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif; COLOR: #fff; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: left; WORD-WRAP: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px
}
#ToolTip {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 1000; MIN-HEIGHT: 1em; BACKGROUND: #000; MAX-WIDTH: 250px; PADDING-BOTTOM: 5px; FONT: 12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif; COLOR: #fff; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: left; WORD-WRAP: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px
}
#ToolTip {
    BORDER-RIGHT: #c5b270 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #c5b270 1px solid; PADDING-LEFT: 15px; BACKGROUND: #fffbd6; PADDING-BOTTOM: 0px; BORDER-LEFT: #c5b270 1px solid; COLOR: #bb861c; LINE-HEIGHT: 30px; PADDING-TOP: 0px; BORDER-BOTTOM: #c5b270 1px solid; TOP: 30px
}
</STYLE>

<META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD>
<BODY class=yui-skin-sam>
<DIV class=demo id=doc>
<DIV id=hd>
<DIV class=page-title>
<H1>中国分省市地图导航 SVG格式（基于Raphaël）</H1></DIV></DIV>
<DIV id=bd>
<DIV class=tell>
<H2><STRONG>在很多场合会用到，如果让你忘掉flash，下面这地图是你“不二“的选择，^_^.</STRONG></H2>
<P>SVG地图基于<A href="http://raphaeljs.com/">Raphaël</A> 生成；为了书写方便，使用了<A
href="http://jquery.com/">Jquery</A>实现一些动画。</P></DIV>
<DIV id=ChinaMap>
<DIV id=ToolTip>地图正在绘制...</DIV></DIV>
<SCRIPT src="codepress.js" type=text/javascript></SCRIPT>
</BODY></HTML>