jQuery实现鼠标经过弹出提示信息的地图热点效果

前端技术 2023/09/05 JavaScript

本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果。分享给大家供大家参考。具体如下：

这里的jQuery鼠标经过弹出提示信息地图热点效果，很多网站上有用到，送给大家，对作者表示感谢。

运行效果截图如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<title>jQuery地图热点效果-鼠标经过弹出提示信息</title>
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\">
<script src=\"jquery-1.6.2.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://files.phpstudy.net/file_images/article/201508/201587110632401.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://files.phpstudy.net/file_images/article/201508/201587110854867.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>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13219

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案