图片添加热点（封装方法） 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #zhezhao {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.7;
            z-index: 100;
            display: none;
        }

        #img_box {
            position: fixed;
            top: 1%;
            left: 10%;
            width: 80%;
            height: 98%;
            z-index: 101;
            display: none;
        }

        #close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
        }

        #append {
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //动态创建map与子级area
            create("myMap", "myMap1", "myMap2", "img", "53,413,71,970,0,998,0,376", "1577,148,1576,1101,1235,976,1240,396");

            function create(id, idarea1, idarea2, idimg, c1, c2) {
                var newmap = document.createElement("map");
                newmap.setAttribute("id", id);
                newmap.setAttribute("name", id);
                document.getElementById("box").appendChild(newmap);
                var newarea = document.createElement("area");
                newarea.setAttribute("id", idarea1);
                newarea.setAttribute("shape", "poly");
                newarea.setAttribute("coords", c1);
                newarea.setAttribute("onclick", "areaclick('" + idimg + "');");
                document.getElementById("myMap").appendChild(newarea);
                var newarea1 = document.createElement("area");
                newarea1.setAttribute("id", idarea2);
                newarea1.setAttribute("shape", "poly"); //620, 70, 620, 430, 490, 380, 490, 160
                newarea1.setAttribute("coords", c2);
                newarea1.setAttribute("onclick", "areaclick('" + idimg + "');");
                document.getElementById("myMap").appendChild(newarea1);
            }

            document.getElementById("close").onclick = function () {
                document.getElementById("append").setAttribute("src", "");
                document.getElementById("zhezhao").style.display = "none";
                document.getElementById("img_box").style.display = "none";
            }
        }

        function areaclick(idimg) {
            document.getElementById("zhezhao").style.display = "block";
            document.getElementById("img_box").style.display = "block";
            var h = document.getElementById("img_box").offsetHeight;
            var w = document.getElementById("img_box").offsetWidth;
            document.getElementById("append").style.maxWidth = w + "px";
            document.getElementById("append").style.maxHeight = h + "px";
            var src = document.getElementById(idimg).src;
            document.getElementById("append").setAttribute("src", src);
            var h1 = document.getElementById("append").style.height;
            document.getElementById("append").style.marginTop = (h - h1) / 2;
        }
    </script>
</head>
<body>
    <div id="box">
        <img src="images/back3.jpg" border="0" usemap="#myMap" alt="Planets" id="img" />
    </div>

    <div id="zhezhao"></div>
    <div id="img_box">
        <img id="close" src="images/wtg.png" />
        <img id="append" src="" />
    </div>

</body>
</html>

 

posted @ 2017-04-20 13:55  露西&哈特菲利亚  阅读(165)  评论(0)    收藏  举报