jquery地图热点提示信息

最新推荐文章于 2021-04-01 11:35:06 发布
msliang
最新推荐文章于 2021-04-01 11:35:06 发布
阅读量3.4k
点赞数
分类专栏： JS 图片效果文章标签： js JS 地图热点突出显示
JS 图片效果专栏收录该内容
2 篇文章
订阅专栏
本文介绍了一种地图热点效果实现方法，当鼠标悬浮在特定区域上时，会弹出包含该区域信息的提示窗口。通过jQuery库简化了操作流程，使交互更加直观。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 

  <
  html
  >
 

  <
  head
  >
 

  <
  title
  >地图热点效果-鼠标经过弹出提示信息</
  title
  >
 

  <
  meta
  http-equiv
  =
  "Content-Type"
  content
  =
  "text/html;charset=UTF-8"
  >
 

  <
  script
  src
  =
  "http://code.jquery.com/jquery-1.7.min.js"
  type
  =
  "text/javascript"
  ></
  script
  >
 

  <
  style
  type
  =
  "text/css"
  >
 

  .map img { width:496px; height: 415px; }
 

  .mapDiv { width:140px; height:61px; padding: 5px; color:#369; background: url('http://static.blueidea.com/attachment/forum/201203/15/153950vvth6ctbmx45kh4t.gif') no-repeat; position:absolute; display: none; word-break:break-all; }
 

  </
  style
  >
 

            
 

  <
  script
  type
  =
  "text/javascript"
  >
 

      
  $(document).ready(function(){
 

          
  $("area").each(function(){
 

              
  var $x=-70;
 

              
  var $y=-80;
 

              
  var name=$(this).attr("alt");  
 

              
  $(this).mouseover(function(e){
 

                  
  var index_num=$(this).index();
 

                  
  var dom="<
  div
  class
  =
  'mapDiv'
  ><
  p
  >提示消息<
  span
  class
  =
  'name'
  ></
  span
  ><
  span
  class
  =
  'num'
  ></
  span
  ></
  p
  ></
  div
  >";
 

                  
  $("body").append(dom);
 

                  
  $(".name").text(name);
 

                  
  $(".num").text(index_num)
 

                  
  $(".mapDiv").css({
 

                          
  top: (e.pageY + $y)+"px",
 

                          
  left: (e.pageX + $x)+"px"
 

                      
  }).show("fast");
 

              
  }).mouseout(function(){            
 

                      
  $(".mapDiv").remove();
 

              
  }).mousemove(function(e){
 

                      
  $(".mapDiv").css({
 

                          
  top: (e.pageY + $y)+"px",
 

                          
  left: (e.pageX + $x)+"px"
 

                  
  })
 

              
  });
 

          
  });        
 

      
  })
 

  </
  script
  >
 

  </
  head
  >
 

  <
  body
  >
 

  <
  div
  class
  =
  "map"
  >
 

  <
  img
  border
  =
  "0"
  usemap
  =
  "#Map"
  src
  =
  "http://static.blueidea.com/attachment/forum/201203/15/1544302yufceen0c3nbjzu.png"
  />
 

  <
  map
  name
  =
  "Map"
  id
  =
  "Map"
  >
 

      
  <
  area
  id
  =
  "beijing"
  alt
  =
  "北京"
  href
  =
  "forum.php?gid=1"
  coords
  =
  "354,140,380,153"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "shanghai"
  alt
  =
  "上海"
  href
  =
  "forum.php?gid=3"
  coords
  =
  "434,246,462,259"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "tianjin"
  alt
  =
  "天津"
  href
  =
  "forum.php?gid=2"
  coords
  =
  "382,168,408,180"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "chongqing"
  alt
  =
  "重庆"
  href
  =
  "forum.php?gid=4"
  coords
  =
  "294,264,320,276"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "hebei"
  alt
  =
  "河北"
  href
  =
  "forum.php?gid=5"
  coords
  =
  "347,174,374,186"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "shanxi"
  alt
  =
  "山西" 
  href
  =
  "forum.php?gid=6"
  coords
  =
  "322,186,348,198"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "neimenggu"
  alt
  =
  "内蒙古"
  href
  =
  "forum.php?gid=7"
  coords
  =
  "349,110,388,124"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "liaoning"
  alt
  =
  "辽宁"
  href
  =
  "forum.php?gid=8"
  coords
  =
  "406,128,432,140"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "jilin"
  alt
  =
  "吉林"
  href
  =
  "forum.php?gid=9"
  coords
  =
  "427,101,454,115"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "heilongjiang"
  alt
  =
  "黑龙江"
  href
  =
  "forum.php?gid=10"
  coords
  =
  "424,58,464,73"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "jiangsu"
  alt
  =
  "江苏"
  href
  =
  "forum.php?gid=11"
  coords
  =
  "404,224,417,250"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "zhejiang"
  alt
  =
  "浙江"
  href
  =
  "forum.php?gid=12"
  coords
  =
  "413,265,427,291"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "anhui"
  alt
  =
  "安徽"
  href
  =
  "forum.php?gid=13"
  coords
  =
  "382,236,395,263"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "fujian"
  alt
  =
  "福建"
  href
  =
  "forum.php?gid=14"
  coords
  =
  "399,300,413,327"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "jiangxi"
  alt
  =
  "江西"
  href
  =
  "forum.php?gid=15"
  coords
  =
  "371,286,385,313"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "shandong"
  alt
  =
  "山东"
  href
  =
  "forum.php?gid=16"
  coords
  =
  "373,196,399,208"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "henan"
  alt
  =
  "河南"
  href
  =
  "forum.php?gid=17"
  coords
  =
  "337,228,364,239"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "hubei"
  alt
  =
  "湖北"
  href
  =
  "forum.php?gid=18"
  coords
  =
  "329,258,356,271"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "hunan"
  alt
  =
  "湖南"
  href
  =
  "forum.php?gid=19"
  coords
  =
  "325,294,352,306"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "guangdong"
  alt
  =
  "广东"
  href
  =
  "forum.php?gid=20"
  coords
  =
  "356,343,382,355"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "guangxi"
  alt
  =
  "广西"
  href
  =
  "forum.php?gid=21"
  coords
  =
  "302,343,328,355"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "hainan"
  alt
  =
  "海南"
  href
  =
  "forum.php?gid=22"
  coords
  =
  "313,398,340,411"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "sichuan"
  alt
  =
  "四川"
  href
  =
  "forum.php?gid=23"
  coords
  =
  "239,265,265,277"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "guizhou"
  alt
  =
  "贵州"
  href
  =
  "forum.php?gid=24"
  coords
  =
  "283,311,308,324"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "yunnan"
  alt
  =
  "云南"
  href
  =
  "forum.php?gid=25"
  coords
  =
  "225,337,251,349"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "shaanxi"
  alt
  =
  "陕西"
  href
  =
  "forum.php?gid=26"
  coords
  =
  "303,224,316,251"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "gansu"
  alt
  =
  "甘肃"
  href
  =
  "forum.php?gid=27"
  coords
  =
  "179,156,205,168"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "qinghai"
  alt
  =
  "青海"
  href
  =
  "forum.php?gid=28"
  coords
  =
  "174,206,200,218"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "ningxia"
  alt
  =
  "宁夏"
  href
  =
  "forum.php?gid=29"
  coords
  =
  "277,188,290,212"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "xinjiang"
  alt
  =
  "新疆"
  href
  =
  "forum.php?gid=30"
  coords
  =
  "85,140,111,152"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "xizang"
  alt
  =
  "西藏"
  href
  =
  "forum.php?gid=31"
  coords
  =
  "87,249,113,261"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "xianggang"
  alt
  =
  "香港"
  href
  =
  "forum.php?gid=32"
  coords
  =
  "379,358,406,370"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "aomen"
  alt
  =
  "澳门"
  href
  =
  "forum.php?gid=33"
  coords
  =
  "349,371,375,383"
  shape
  =
  "rect"
  >
 

      
  <
  area
  id
  =
  "taiwan"
  alt
  =
  "台湾"
  href
  =
  "forum.php?gid=34"
  coords
  =
  "434,322,448,348"
  shape
  =
  "rect"
  >
 

  </
  map
  >
 

  </
  div
  >
 

  </
  body
  >
 

  </
  html
  >
 