如何在imageMap的精确坐标处插入div

时间：2015-11-01 23:45:20

标签： jquery html css

我有一个放在div中的imageMap。单击特定区域时，我需要显示叠加，我已经完成了帮助使用绝对坐标创建div。我仅使用图像创建绝对坐标而没有其他标记。

当网页只有图片标签时，它非常有效。当我将它与我需要的结合时，叠加显示在不同的位置。 这是我的代码：

我做错了什么？

要查看流程，请在加载此页面后，单击“＃34;选择受影响区域”＃34;然后单击图像上圆形区域上的任意一个。红色叠加显示在图像的底部。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="papaya.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="papaya.js"></script>

        <style>
            .jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

            .menuItem {
                background-color: #e0e0ff;
                width:299px;
                height:137px;
                border:2px solid #000;
            }

            .fontSize {
                padding-top:50px;
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 

            .smallViewer {
                margin-left:75px;width:700px;height:420px;
            }

            .left {
                float: left;
            }

            #lymphNode img {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }


        </style>
        <script>
            $(document).ready(function ()
            {
                $(".links").click(function ()
                {
                    $visible = $("divs:visible");
                    $(".divs:visible").hide();
                    $("#" + $(this).attr("data-showdiv")).show();
                });

                $("map#imageMap").click(function (event) {
                    var target = $(event.target);
                    var targetId = target.attr('id');
                    var matches = targetId.match(/\d+/)[0];
                    if($("#div"+matches).is(":visible"))
                        $("#div" + matches).hide();
                    else
                    $("#div" + matches).show();
                });

                $('img').click(function (e) {
                    var offset = $(this).offset();
                    var relativeX = (e.pageX - offset.left);
                    var relativeY = (e.pageY - offset.top);
                    alert(relativeX + ':' + relativeY);

                });

            });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

            <div style="width:1140px; height:550px;border:2px solid #000;">
                <div style="float: left">
                    <div style="width:300px; height: 550px;display: inline-block;"> 
                        <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> Scan Images </div> </a>
                        <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a>
                        <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> Patient Details </div> </a>
                        <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation  </div> </a>
                    </div>
                </div>

                <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;"> 
                    <div class="divs smallViewer" style="display:none;" id="viewer"> 
                        <div class="papaya"> </div> 
                    </div>

                    <div id="lymphNode" class="divs" style="display:none;">
                        <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/>
                        <div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <div id="div8" title="node8" style="width:13px;height:12px;position:absolute;top:100;left:209;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
                        <map id="imageMap" name="imageMap">
                            <area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/>
                            <area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/>
                            <area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/>
                            <area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/>
                            <area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/>
                            <area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/>
                            <area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/>
                            <area shape="circle" coords="209,457,8" href="#" alt="Node 8" title="Node 8" id="node8"/>
                        </map>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

这是没有任何div元素的代码。只有普通的imageMap。

 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
 .circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}
</style>
 </head>
 <body>

 <div style="height:550px; width: 832px;">
 <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/>
 <div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5"></div>
 <div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5"></div>

 <map id="imageMap" name="imageMap">
    <area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/>
    <area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/>
    <area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/>
    <area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/>
    <area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/>
    <area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/>
    <area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/>
  </map>
  </div>
</body>
<script>
$(document).ready(function() {
    $("#div1").hide();
    $("#div2").hide();
    $("#div3").hide();
    $("#div4").hide();
    $("#div5").hide();
    $("#div6").hide();
    $("#div7").hide();

    $("map#imageMap").click(function(event){
        var target = $(event.target);
        var targetId = target.attr('id');
        var matches = targetId.match(/\d+/)[0];
        $("#div"+matches).show();
    });

    $('img').click(function(e){
        var offset = $(this).offset();
        var relativeX = (e.pageX - offset.left);
        var relativeY = (e.pageY - offset.top);
        alert(relativeX+':'+relativeY);

    });
});
</script>
</html>

1 个答案:

答案 0 :(得分：0)

点击区域的坐标的一种方法是每个区域都有一个坐标数组，然后在点击图像时检查哪个区域与指针的坐标相匹配。见下面的代码：

var areas = (function(){
    var areaCoords = [];
    $('#imageMap area').each(function(){
        var coords = $(this).attr('coords').split(',');
        areaCoords.push({
            x:coords[0],
            y:coords[1]
        });
    });

    return areaCoords;
}());

$('img').click(function (e) {
    var coords;
    for (var i=areas.length-1;i>0;i-=1) {
        if (e.offsetX >= areas[i].x && e.offsetY >= areas[i].y) {
            coords = areas[i];
            break;
        }
    }

    console.log(coords.x, coords.y);
});
相关问题
最新问题