jquery中国省份地图插件

这是一款使用jquery和png图片来制作的中国省份地图特效插件。该中国省份地图插件使用多张png图片来组成中国省份地图，并在鼠标滑过各个省份时将其高亮。

使用方法

在页面中引入jquery和样式文件style.css。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/jscript" src="js/jquery.min.js"></script>
                

HTML结构

该中国省份地图使用<div>配合png图片来制作，完整的代码如下：

<div class="map">
  <img src="images/map.jpg" width="716" height="595" usemap="#Map" border="0"/>
  <div class="city"><div class="citybg" style="background:url(images/anhui.png) no-repeat 0 0; top:314px; left:523px; width:75px; height:90px;"></div><a style=" position:absolute; top:355px; left:545px; z-index:10;" href="index.html">安徽</a></div>
  <div class="city"><div class="citybg" style="background:url(images/neimeng.png) no-repeat 0 0;  top:9px; left:296px; width:318px; height:272px; display:block;"></div><a style="position:absolute; top:211px; left:424px; z-index:10;" href="index.html">内蒙</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/heilongjiang.png) no-repeat 0 0; top:1px; left:550px; width:165px; height:151px;"></div><a style="position:absolute;top:81px; left:624px; z-index:10;" href="index.html">黑龙江</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/xinjiang.png) no-repeat 0 0; top:73px; left:0px; width:292px; height:223px;"></div><a style="position:absolute;top:211px; left:124px; z-index:10;" href="index.html">新疆</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/xizang.png) no-repeat 0 0; top:275px; left:31px; width:281px; height:175px;"></div><a style="position:absolute;top:361px; left:145px; z-index:10;" href="index.html">西藏</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/qinghai.png) no-repeat 0 0; top:240px; left:182px; width:185px; height:135px;"></div><a style="position:absolute;top:300px; left:254px; z-index:10;" href="index.html">青海</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/gansu.png) no-repeat 0 0; top:187px; left:236px; width:207px; height:177px;"></div><a style="position:absolute;top:310px; left:364px; z-index:10;" href="index.html">甘肃</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/ningxia.png) no-repeat 0 0; top:245px; left:379px; width:49px; height:75px;"></div><a style="position:absolute;top:272px; left:390px; z-index:10;" href="index.html">宁夏</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/shanghai.png) no-repeat 0 0; top:354px; left:610px; width:23px; height:22px;"></div><a style="position:absolute;top:352px; left:615px;; z-index:10;" href="index.html">上海</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/liaoning.png) no-repeat 0 0; top:161px; left:557px; width:91px; height:87px;"></div><a style="position:absolute;top:180px; left:600px; z-index:10;" href="index.html">辽宁</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/guangdong.png) no-repeat 0 0; top:470px; left:464px; width:111px; height:88px;"></div><a style="position:absolute;top:490px; left:500px; z-index:10;" href="index.html">广东</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/guangxi.png) no-repeat 0 0; top:454px; left:382px; width:118px; height:92px;"></div><a style="position:absolute;top:488px; left:432px; z-index:10;" href="index.html">广西</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/henan.png) no-repeat 0 0; top:288px; left:461px; width:118px; height:92px;"></div><a style="position:absolute;top:320px; left:490px; z-index:10;" href="index.html">河南</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/shanxi.png) no-repeat 0 0; top:242px; left:396px; width:79px; height:134px;"></div><a style="position:absolute;top:321px; left:430px; z-index:10;" href="index.html">陕西</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/shanxi2.png) no-repeat 0 0; top:219px; left:458px; width:56px; height:112px;"></div><a style="position:absolute;top:271px; left:470px; z-index:10;" href="index.html">山西</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/hebei.png) no-repeat 0 0; top:184px; left:497px; width:85px; height:118px;"></div><a style="position:absolute;top:247px; left:508px; z-index:10;" href="index.html">河北</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/jilin.png) no-repeat 0 0; top:113px; left:575px; width:125px; height:88px;"></div><a style="position:absolute;top:150px; left:642px; z-index:10;" href="index.html">吉林</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/beijing.png) no-repeat 0 0; top:210px; left:512px; width:50px; height:38px;"></div><a style="position:absolute;top:215px; left:515px; z-index:10;" href="index.html">北京</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/tianjin.png) no-repeat 0 0; top:224px; left:535px; width:26px; height:34px;"></div><a style="position:absolute;top:229px; left:535px; z-index:10;" href="index.html">天津</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/shandong.png) no-repeat 0 0; top:256px; left:521px; width:103px; height:68px;"></div><a style="position:absolute;top:281px; left:540px; z-index:10;" href="index.html">山东</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/jiangsu.png) no-repeat 0 0; top:305px; left:539px; width:93px; height:72px;"></div><a style="position:absolute;top:321px; left:570px; z-index:10;" href="index.html">江苏</a></div> 
  <div class="city"><div class="citybg" style=" background:url(images/hainan.png) no-repeat 0 0; top:556px; left:442px; width:89px; height:88px;"></div><a style="position:absolute;top:565px; left:450px; z-index:10;" href="index.html">海南</a></div>  
  <div class="city"><div class="citybg" style=" background:url(images/hubei.png) no-repeat 0 0; top:345px; left:438px; width:115px; height:75px;"></div><a style="position:absolute;top:365px; left:480px; z-index:10;" href="index.html">湖北</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/yunnan.png) no-repeat 0 0; top:412px; left:280px; width:132px; height:138px;"></div><a style="position:absolute;top:485px; left:320px; z-index:10;" href="index.html">云南</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/sichuan.png) no-repeat 0 0; top:328px; left:284px; width:161px; height:143px;"></div><a style="position:absolute;top:385px; left:345px; z-index:10;" href="index.html">四川</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/guizhou.png) no-repeat 0 0; top:409px; left:367px; width:93px; height:81px;"></div><a style="position:absolute;top:445px; left:405px; z-index:10;" href="index.html">贵州</a></div> 
  <div class="city"><div class="citybg" style=" background:url(images/taiwan.png) no-repeat 0 0; top:456px; left:613px; width:32px; height:65px;"></div><a style="position:absolute;top:475px; left:620px; z-index:10;" href="index.html">台湾</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/fujian.png) no-repeat 0 0; top:415px; left:548px; width:70px; height:84px;"></div><a style="position:absolute;top:445px; left:565px; z-index:10;" href="index.html">福建</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/hunan.png) no-repeat 0 0; top:394px; left:445px; width:83px; height:96px;"></div><a style="position:absolute;top:425px; left:475px; z-index:10;" href="index.html">湖南</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/zhejiang.png) no-repeat 0 0; top:367px; left:574px; width:62px; height:70px;"></div><a style="position:absolute;top:395px; left:588px; z-index:10;" href="index.html">浙江</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/jiangxi.png) no-repeat 0 0; top:390px; left:513px; width:76px; height:98px;"></div><a style="position:absolute;top:425px; left:525px; z-index:10;" href="index.html">江西</a></div>
  <div class="city"><div class="citybg" style=" background:url(images/chongqing.png) no-repeat 0 0; top:363px; left:397px; width:70px; height:80px;"></div><a style="position:absolute;top:390px; left:420px; z-index:10;" href="index.html">重庆</a></div>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来使鼠标滑过相应的省份时将其高亮。

$(document).ready(function(){
  maphover();
});

function maphover(){
  var self = "";
  $(".city").hover(
    function(){
      self = $(this);
      self.addClass("hover").children("div").show();
    },
    function(){
      self = $(this);
      self.children("div").hide();
      self.removeClass("hover");
    }
  );
  $(".city").click(
    function(){
      self = $(this);
      self.addClass("hover").children("div").show();
    },
    function(){
      self = $(this);
      self.children("div").hide();
      self.removeClass("hover");
    }
  );
    
};