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


Posted in Javascript onAugust 07, 2015

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

这里的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('//img.jbzj.com/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="//img.jbzj.com/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程序设计有所帮助。

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
微信小程序实现上传图片功能
May 28 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
C++中的string类的用法小结
Aug 07 #Javascript
Grunt入门教程(自动任务运行器)
Aug 06 #Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
node.js基础知识小结
2018/02/26 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Python实现语音识别和语音合成功能
2019/09/20 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python如何输出整数
2020/06/07 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
模具专业推荐信
2013/10/30 职场文书
干部现实表现材料
2014/02/13 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
新闻学专业求职信
2014/07/28 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python实现天气查询软件
2021/06/07 Python