Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

前端技术 2023/09/09 JavaScript

如下所示：

复制代码 代码如下:

<!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=\"JS/jquery-1.8.0.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(\'Images/dialge.gif\') no-repeat;
            position: absolute;
            display: none;
            word-break: break-all;
        }
    </style>
    <script type=\"text/javascript\">
        $(document).ready(function () {
            $(\"area\").each(function () {
                var $x = -55;
                var $y = -80;
                var name = $(this).attr(\"alt\");
                $(this).mouseover(function (e) {
                    var strall = [];
                    strall = $(this).attr(\"coords\").split(\",\");
                    var x = parseInt(strall[0]);
                    var y = parseInt(strall[3]);
                    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({
                        left: (x + $x) + \"px\",
                        top: (y + $y) + \"px\"

                    }).show();
                }).mouseout(function () {
                    $(\".mapDiv\").remove();
                }).mousemove(function (e) {
                    $(\".mapDiv\").css({
                        left: (x + $x) + \"px\",
                        top: (y + $y) + \"px\"
                    })
                });
            });
            //first load
            show();
            //random
            setInterval(show, 3000); // 注意函数名没有引号和括弧
        });


        function show() {
            var area = $(\"area\");
            var random = getRandom(area.length);
            $(area[random]).trigger(\"mouseover\");
        }

        function getRandom(n) { return Math.floor(Math.random() * n + 1) }
    </script>
</head>
<body>
    <div class=\"map\">
        <img border=\"0\" usemap=\"#Map\" src=\"images/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>

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案