jQuery焦点中国地图_第1张图片 

以下为上图代码实例：

   
   
   
   
    
    
    
    
    
  1.  
    2. 
   
   
   
   
   
   
   
   
    
    
    
    
    
  1. "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3.   
    4. 
   
   
   
   
   
   
   
   
    
    
    
    
    
  1. <div id="dataMap"> 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3.         <span style="top:162px;left:392px"><a href="#" class="hotcity">北京a><em>9999em>span> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5.         <span style="top:110px;left:465px;"><a href="#">吉林a><em>9999em>span> 
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7.         <span style="top:165px;left:305px"><a href="#">内蒙古a><em>9999em>span> 
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9.         <span style="top:260px;left:120px"><a href="#">西藏a><em>9999em>span> 
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11.         <span style="top:293px;left:255px"><a href="#">四川a><em>9999em>span> 
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13.         <span style="top:290px;left:310px"><a href="#">重庆a><em>9999em>span> 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15.         <span style="top:365px;left:380px"><a href="#">广东a><em>9999em>span> 
    16. 
    
    
    
    
  16.  
    17. 
    
    
    
    
  17.         <span style="top:335px;left:295px"><a href="#">贵州a><em>9999em>span> 
    18. 
    
    
    
    
  18.  
    19. 
    
    
    
    
  19.         <span style="top:420px;left:342px"><a href="#">海南a><em>9999em>span> 
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21.  
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.         <span style="top:70px;left:460px"><a href="#">黑龙江a><em>9999em>span> 
    24. 
    
    
    
    
  24.  
    25. 
    
    
    
    
  25.         <span style="top:296px;left:445px"><a href="#">浙江a><em>9999em>span> 
    26. 
    
    
    
    
  26.  
    27. 
    
    
    
    
  27.         <span style="top:265px;left:410px"><a href="#">安徽a><em>9999em>span> 
    28. 
    
    
    
    
  28.  
    29. 
    
    
    
    
  29.         <span style="top:206px;left:400px"><a href="#">山东a><em>9999em>span> 
    30. 
    
    
    
    
  30.  
    31. 
    
    
    
    
  31.         <span style="top:359px;left:237px"><a href="#">云南a><em>9999em>span> 
    32. 
    
    
    
    
  32.  
    33. 
    
    
    
    
  33.         <span style="top:222px;left:180px"><a href="#">青海a><em>9999em>span> 
    34. 
    
    
    
    
  34.  
    35. 
    
    
    
    
  35.         <span style="top:165px;left:200px"><a href="#">甘肃a><em>9999em>span> 
    36. 
    
    
    
    
  36.  
    37. 
    
    
    
    
  37.         <span style="top:200px;left:300px"><a href="#">宁夏a><em>9999em>span> 
    38. 
    
    
    
    
  38.  
    39. 
    
    
    
    
  39.         <span style="top:317px;left:343px"><a href="#">湖南a><em>9999em>span> 
    40. 
    
    
    
    
  40.  
    41. 
    
    
    
    
  41.  
    42. 
    
    
    
    
  42.  
    43. 
    
    
    
    
  43.         <span style="top:317px;left:400px"><a href="#">江西a><em>9999em>span> 
    44. 
    
    
    
    
  44.  
    45. 
    
    
    
    
  45.         <span style="top:250px;left:435px"><a href="#">江苏a><em>9999em>span> 
    46. 
    
    
    
    
  46.  
    47. 
    
    
    
    
  47.         <span style="top:280px;left:458px"><a href="#" class="hotcity">上海a><em>9999em>span> 
    48. 
    
    
    
    
  48.  
    49. 
    
    
    
    
  49.         <span style="top:385px;left:355px"><a href="#">澳门a><em>9999em>span> 
    50. 
    
    
    
    
  50.  
    51. 
    
    
    
    
  51.         <span style="top:383px;left:392px"><a href="#">香港a><em>9999em>span> 
    52. 
    
    
    
    
  52.  
    53. 
    
    
    
    
  53.         <span style="top:138px;left:433px"><a href="#">辽宁a><em>9999em>span> 
    54. 
    
    
    
    
  54.  
    55. 
    
    
    
    
  55.         <span style="top:190px;left:380px"><a href="#">河北a><em>9999em>span> 
    56. 
    
    
    
    
  56.  
    57. 
    
    
    
    
  57.         <span style="top:210px;left:350px"><a href="#">山西a><em>9999em>span> 
    58. 
    
    
    
    
  58.  
    59. 
    
    
    
    
  59.         <span style="top:176px;left:408px"><a href="#">天津a><em>9999em>span> 
    60. 
    
    
    
    
  60.  
    61. 
    
    
    
    
  61.  
    62. 
    
    
    
    
  62.  
    63. 
    
    
    
    
  63.         <span style="top:130px;left:125px"><a href="#">新疆a><em>9999em>span> 
    64. 
    
    
    
    
  64.  
    65. 
    
    
    
    
  65.         <span style="top:277px;left:357px"><a href="#">湖北a><em>9999em>span> 
    66. 
    
    
    
    
  66.  
    67. 
    
    
    
    
  67.         <span style="top:240px;left:310px"><a href="#">陕西a><em>9999em>span> 
    68. 
    
    
    
    
  68.  
    69. 
    
    
    
    
  69.         <span style="top:240px;left:360px"><a href="#">河南a><em>9999em>span> 
    70. 
    
    
    
    
  70.  
    71. 
    
    
    
    
  71.         <span style="top:340px;left:420px"><a href="#">福建a><em>9999em>span> 
    72. 
    
    
    
    
  72.  
    73. 
    
    
    
    
  73.         <span style="top:360px;left:460px"><a href="#">台湾a><em>9999em>span> 
    74. 
    
    
    
    
  74.  
    75. 
    
    
    
    
  75.         <span style="top:375px;left:315px"><a href="#">广西a><em>9999em>span> 
    76. 
    
    
    
    
  76.  
    77. 
    
    
    
    
  77.     div> 
    78. 
    
    
    
    
  78.  
    79. 
    
    
    
    
  79.     <div id="dataTip" class="dataTip">div> 
    80.

 

jQuery焦点中国地图_第2张图片

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

   
   
   
   
    
    
    
    
    
  1. <HTML lang=ch style="HEIGHT: 100%"   
    2. 
    
    
    
    
  2. xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>DemoTITLE> 
    3. 
    
    
    
    
  3. <META http-equiv=Content-Type content="text/html; charset=utf-8"> 
    4. 
    
    
    
    
  4. <SCRIPT src="swfobject.js" type=text/javascript>SCRIPT> 
    5. 
    
    
    
    
  5. <SCRIPT type=text/javascript> 
    6. 
    
    
    
    
  6.     function eventHandler(e) {  
    7. 
    
    
    
    
  7.         alert(e.value);  
    8. 
    
    
    
    
  8.     }  
    9. 
    
    
    
    
  9. SCRIPT> 
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. <META content="MSHTML 6.00.6000.17098" name=GENERATOR>HEAD> 
    12. 
    
    
    
    
  12. <BODY id=player> 
    13. 
    
    
    
    
  13. <DIV id=container>Get the Flash Player to see this playerDIV> 
    14. 
    
    
    
    
  14. <SCRIPT type=text/javascript> 
    15. 
    
    
    
    
  15.         var s1 = new SWFObject("ChinaMap.swf","ply","600","500","10","#FFFFFF");  
    16. 
    
    
    
    
  16.         s1.addParam("allowfullscreen","true");  
    17. 
    
    
    
    
  17.         s1.addParam("allownetworking","all");  
    18. 
    
    
    
    
  18.         s1.addParam("allowscriptaccess","always");  
    19. 
    
    
    
    
  19.         s1.addParam("wmode","transparent");  
    20. 
    
    
    
    
  20.         s1.addVariable("title","×××");  
    21. 
    
    
    
    
  21.         s1.addVariable("xmlurl","d.xml");  
    22. 
    
    
    
    
  22.         s1.addVariable("jsHandler","eventHandler");  
    23. 
    
    
    
    
  23.         s1.write("container");  
    24. 
    
    
    
    
  24.     SCRIPT> 
    25. 
    
    
    
    
  25. BODY>HTML> 
    26.

 

jQuery焦点中国地图_第3张图片 

 

 

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

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

 

jQuery焦点中国地图_第4张图片

 

   
   
   
   
    
    
    
    
    
  1. <HTML lang=zh><HEAD><TITLE>中国分省市地图导航-SVG格式（基于Raphaël）TITLE> 
    2. 
    
    
    
    
  2. <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK   
    3. 
    
    
    
    
  3. href="style.css" type=text/css rel=stylesheet> 
    4. 
    
    
    
    
  4. <SCRIPT src="jquery.min.js" type=text/javascript>SCRIPT> 
    5. 
    
    
    
    
  5.  
    6. 
    
    
    
    
  6. <SCRIPT src="raphael.js" type=text/javascript>SCRIPT> 
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8. <SCRIPT type=text/javascript> 
    9. 
    
    
    
    
  9.                 //预留作为初始化打开显示的省份  
    10. 
    
    
    
    
  10.         var current = null;  
    11. 
    
    
    
    
  11.     SCRIPT> 
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13. <SCRIPT src="chinamap.js" type=text/javascript>SCRIPT> 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15. <STYLE> 
    16. 
    
    
    
    
  16. #ChinaMap {  
    17. 
    
    
    
    
  17.     PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 560px; PADDING-TOP: 10px; POSITION: relative; TEXT-ALIGN: center  
    18. 
    
    
    
    
  18. }  
    19. 
    
    
    
    
  19. #tiplayer {  
    20. 
    
    
    
    
  20.     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  
    21. 
    
    
    
    
  21. }  
    22. 
    
    
    
    
  22. #ToolTip {  
    23. 
    
    
    
    
  23.     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  
    24. 
    
    
    
    
  24. }  
    25. 
    
    
    
    
  25. #ToolTip {  
    26. 
    
    
    
    
  26.     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  
    27. 
    
    
    
    
  27. }  
    28. 
    
    
    
    
  28. STYLE> 
    29. 
    
    
    
    
  29.  
    30. 
    
    
    
    
  30. <META content="MSHTML 6.00.6000.17098" name=GENERATOR>HEAD> 
    31. 
    
    
    
    
  31. <BODY class=yui-skin-sam> 
    32. 
    
    
    
    
  32. <DIV class=demo id=doc> 
    33. 
    
    
    
    
  33. <DIV id=hd> 
    34. 
    
    
    
    
  34. <DIV class=page-title> 
    35. 
    
    
    
    
  35. <H1>中国分省市地图导航 SVG格式（基于Raphaël）H1>DIV>DIV> 
    36. 
    
    
    
    
  36. <DIV id=bd> 
    37. 
    
    
    
    
  37. <DIV class=tell> 
    38. 
    
    
    
    
  38. <H2><STRONG>在很多场合会用到，如果让你忘掉flash，下面这地图是你“不二“的选择，^_^.STRONG>H2> 
    39. 
    
    
    
    
  39. <P>SVG地图基于<A href="http://raphaeljs.com/">RaphaëlA> 生成；为了书写方便，使用了<A   
    40. 
    
    
    
    
  40. href="http://jquery.com/">JqueryA>实现一些动画。P>DIV> 
    41. 
    
    
    
    
  41. <DIV id=ChinaMap> 
    42. 
    
    
    
    
  42. <DIV id=ToolTip>地图正在绘制...DIV>DIV> 
    43. 
    
    
    
    
  43. <SCRIPT src="codepress.js" type=text/javascript>SCRIPT> 
    44. 
    
    
    
    
  44. BODY>HTML> 
    45.