图片添加热点

把图片里的小图片抠出，添加链接或事件

<!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>
</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>
    <script type="text/javascript">

        var newmap = document.createElement("map");
        newmap.setAttribute("id", "myMap");
        newmap.setAttribute("name", "myMap");
        document.getElementById("box").appendChild(newmap);
        var newarea = document.createElement("area");
　　　　 newarea.setAttribute("href","链接地址");
        newarea.setAttribute("shape", "poly");
　　　　 //多边形（右上为第一个点，右下为第二个点，左下为第三个点，左上为第四个点），
　　　　 //circle：圆形（圆心坐标[即圆心距离左上角的距离]X,Y，圆的半径R），rect：长方形（距离左上角的距离X，Y，长宽：W,H）
        newarea.setAttribute("coords", "53,413,71,970,0,998,0,376");
        document.getElementById("myMap").appendChild(newarea);
        var newarea1 = document.createElement("area");
        newarea1.setAttribute("shape", "poly"); //620, 70, 620, 430, 490, 380, 490, 160
        newarea1.setAttribute("coords", "1577,148,1576,1101,1235,976,1240,396");
        document.getElementById("myMap").appendChild(newarea1);

        var map = document.getElementById("myMap");
        var close = document.getElementById("close");
        map.onclick = function () {
            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("img").src;
            document.getElementById("append").setAttribute("src", src);
            var h1 = document.getElementById("append").style.height;
            document.getElementById("append").style.marginTop = (h - h1) / 2;
        }

        close.onclick = function () {
            document.getElementById("append").setAttribute("src", "");
            document.getElementById("zhezhao").style.display = "none";
            document.getElementById("img_box").style.display = "none";
        };
    </script>
</body>
</html>

 

posted @ 2017-04-20 10:28  露西&哈特菲利亚  阅读(137)  评论(0)  编辑  收藏  举报