程序博客网 > 智能网络电视

jquery地图热点提示信息

来源：互联网 发布：智能网络电视 编辑：程序博客网 时间：2024/04/27 19:24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>地图热点效果-鼠标经过弹出提示信息</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptsrc="http://code.jquery.com/jquery-1.7.min.js"type="text/javascript"></script>
<styletype="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>
          
<scripttype="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="<divclass='mapDiv'><p>提示消息<spanclass='name'></span><spanclass='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>
<divclass="map">
<imgborder="0"usemap="#Map"src="http://static.blueidea.com/attachment/forum/201203/15/1544302yufceen0c3nbjzu.png"/>
<mapname="Map"id="Map">
    <areaid="beijing"alt="北京"href="forum.php?gid=1"coords="354,140,380,153"shape="rect">
    <areaid="shanghai"alt="上海"href="forum.php?gid=3"coords="434,246,462,259"shape="rect">
    <areaid="tianjin"alt="天津"href="forum.php?gid=2"coords="382,168,408,180"shape="rect">
    <areaid="chongqing"alt="重庆"href="forum.php?gid=4"coords="294,264,320,276"shape="rect">
    <areaid="hebei"alt="河北"href="forum.php?gid=5"coords="347,174,374,186"shape="rect">
    <areaid="shanxi"alt="山西" href="forum.php?gid=6"coords="322,186,348,198"shape="rect">
    <areaid="neimenggu"alt="内蒙古"href="forum.php?gid=7"coords="349,110,388,124"shape="rect">
    <areaid="liaoning"alt="辽宁"href="forum.php?gid=8"coords="406,128,432,140"shape="rect">
    <areaid="jilin"alt="吉林"href="forum.php?gid=9"coords="427,101,454,115"shape="rect">
    <areaid="heilongjiang"alt="黑龙江"href="forum.php?gid=10"coords="424,58,464,73"shape="rect">
    <areaid="jiangsu"alt="江苏"href="forum.php?gid=11"coords="404,224,417,250"shape="rect">
    <areaid="zhejiang"alt="浙江"href="forum.php?gid=12"coords="413,265,427,291"shape="rect">
    <areaid="anhui"alt="安徽"href="forum.php?gid=13"coords="382,236,395,263"shape="rect">
    <areaid="fujian"alt="福建"href="forum.php?gid=14"coords="399,300,413,327"shape="rect">
    <areaid="jiangxi"alt="江西"href="forum.php?gid=15"coords="371,286,385,313"shape="rect">
    <areaid="shandong"alt="山东"href="forum.php?gid=16"coords="373,196,399,208"shape="rect">
    <areaid="henan"alt="河南"href="forum.php?gid=17"coords="337,228,364,239"shape="rect">
    <areaid="hubei"alt="湖北"href="forum.php?gid=18"coords="329,258,356,271"shape="rect">
    <areaid="hunan"alt="湖南"href="forum.php?gid=19"coords="325,294,352,306"shape="rect">
    <areaid="guangdong"alt="广东"href="forum.php?gid=20"coords="356,343,382,355"shape="rect">
    <areaid="guangxi"alt="广西"href="forum.php?gid=21"coords="302,343,328,355"shape="rect">
    <areaid="hainan"alt="海南"href="forum.php?gid=22"coords="313,398,340,411"shape="rect">
    <areaid="sichuan"alt="四川"href="forum.php?gid=23"coords="239,265,265,277"shape="rect">
    <areaid="guizhou"alt="贵州"href="forum.php?gid=24"coords="283,311,308,324"shape="rect">
    <areaid="yunnan"alt="云南"href="forum.php?gid=25"coords="225,337,251,349"shape="rect">
    <areaid="shaanxi"alt="陕西"href="forum.php?gid=26"coords="303,224,316,251"shape="rect">
    <areaid="gansu"alt="甘肃"href="forum.php?gid=27"coords="179,156,205,168"shape="rect">
    <areaid="qinghai"alt="青海"href="forum.php?gid=28"coords="174,206,200,218"shape="rect">
    <areaid="ningxia"alt="宁夏"href="forum.php?gid=29"coords="277,188,290,212"shape="rect">
    <areaid="xinjiang"alt="新疆"href="forum.php?gid=30"coords="85,140,111,152"shape="rect">
    <areaid="xizang"alt="西藏"href="forum.php?gid=31"coords="87,249,113,261"shape="rect">
    <areaid="xianggang"alt="香港"href="forum.php?gid=32"coords="379,358,406,370"shape="rect">
    <areaid="aomen"alt="澳门"href="forum.php?gid=33"coords="349,371,375,383"shape="rect">
    <areaid="taiwan"alt="台湾"href="forum.php?gid=34"coords="434,322,448,348"shape="rect">
</map>
</div>
</body>
</html>


本文为www.dayday28.com整理

本文地址：http://www.dayday28.com/post/2012-09-21/40039427929

智能网络电视 智能网络电视
原创粉丝点击
热门IT博客
淘宝流量红包怎么领取淘宝流量红包怎么领取
淘宝上的小样是正品吗淘宝上的小样是正品吗
mac装双系统win8
淘宝老兵蜜蜡是真的吗
nginx 加载配置文件
用myelipse写java
数据库的建模
淘宝上的人参能吃吗
手机北斗定位软件
极简网盘 php
bh椭圆机 知乎
php数组删除指定元素
小米怎么重置网络设置
相册分类软件
marksimos软件下载
unity3d赛车游戏源码
学霸帮软件免费下载
web数据挖掘是指
iphone8步数无数据
怎么成为淘宝模特
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 变频器滤波器 有源滤波器生产厂家 滤波电路的作用 有源滤波器apf 切比雪夫滤波器 有源动态滤波器 车载音响滤波器 电子滤波器设计 有源滤波器价格 滤波电容的大小的选取 常用的数字滤波方法 整流滤波电路实验报告 集成有源滤波器 音响电源滤波器 高压滤波电容 低压有源电力滤波装置 巴特沃斯低通滤波器 陶瓷滤筒 滤筒除尘设备 油烟采样滤筒 除尘滤筒厂家 3266除尘滤筒 自洁式空气滤筒 不锈钢滤筒 除尘滤筒价格 脉冲滤筒式除尘器 单机滤筒除尘器 滤筒式集尘器 草缸滤筒 滤筒除尘 除尘滤筒 滤筒 滤纸 机油滤纸快速对照图 玻璃纤维滤纸 滤纸的种类 滤油纸 滤油纸打孔机 滤纸可以用什么代替 机油滤纸 变压器滤油纸

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里