jquery - 如何在 imageMap 的精确坐标处插入一个 div-6ren

jquery - 如何在 imageMap 的精确坐标处插入一个 div

转载作者：行者123 更新时间：2023-11-28 03:03:47

我有一个放在 div 中的 imageMap。单击特定区域时，我需要显示一个叠加层，这是我在使用绝对坐标创建 div 的帮助下完成的。我只使用图像而不使用其他标签创建了绝对坐标。

当网页只有图片标签时，效果很好。当我将它与我需要的东西整合时，叠加层会出现在不同的位置。这是我的代码:

我做错了什么？

要查看流程，加载此页面后，单击显示“选择受影响区域”的元素，然后单击图像上任何圆形区域。红色覆盖层出现在图像的底部。

<!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>

最佳答案

获取单击区域坐标的一种方法是获取每个区域的坐标数组，然后在单击图像时检查哪个区域与指针的坐标匹配。见以下代码:

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);
});

关于jquery - 如何在 imageMap 的精确坐标处插入一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33468601/

文章推荐： c++ - 重载 cout 时 undefined reference

文章推荐： css - 容器内可扩展和可交换的图像

文章推荐： html - 在 CSS 中添加背景图片

python - 给定 X 坐标，如何计算一个点的 Y 坐标，使其位于贝塞尔曲线上
我有一个点(粉色圆圈)，它有一个已知的 X 坐标和一个已知的 Y 坐标，但 Y 坐标> 坐标不正确。它当前位于目标贝塞尔曲线(部分位于白色正方形中的曲线)所在的点(如果它是两点之间的一条线)。我需要为
c++ - 如何根据 X 坐标(QWT)获取绘图曲线的 Y 坐标？
有一个基于QML 和QWT 的代码，一种具有更多可能性的图形生成器。技术要求之一是根据某个 X 坐标获得绘图曲线的 Y 坐标。有一种不准确的方法 - 获取 QwtPlotCurve 的 QPoint
java - 如何停止 3D 转换为 2D 坐标，在另一侧创建 "ghost"坐标？
我目前正在将对象的 3D 坐标转换为 2D 坐标，然后在其上绘制 2D 文本(目前是对象名称): public static int[] getScreenCoords(double x, doubl
python - 使用 pyplot.scatter() 方法绘制元组列表(x 坐标、y 坐标、颜色)
首先，我创建一个元组列表(要绘制的点)。每个元组由 3 个数字组成(x - 坐标，y - 坐标，c - 点的颜色) import random import matplotlib.pyplot as
Java 坐标
我正在制作一个 2 人 Java 游戏，但我需要确保坐标保留在板上。 addPiece(1, 1, "X"); addPiece(8, 8, "O"); showBoard(); Scanner my
Python最近邻——坐标
我想检查我是否正确使用了 scipy 的 KD 树，因为它看起来比简单的暴力破解要慢。关于这个我有三个问题: Q1. 如果我创建以下测试数据: nplen = 1000000 # WGS84 lat
geolocation - GeoJSON 坐标？
我有一个 GeoJSON 文件，我正在尝试处理它以便在谷歌地图上绘制一些功能。然而，问题在于坐标不是传统的纬度/经度表示法，而是一些大的六位/七位数字。示例: { "type":
java - 坐标(数组列表)
我在使用坐标时遇到格式化问题。 public class Coordinate { public int x; public int y; public Coordinate( int x
java - 在android中获取当前位置(坐标)？
我正在尝试获取当前位置的经度和纬度坐标。这是到目前为止我的代码: public class MainActivity extends AppCompatActivity { @Override pro
贝塞尔曲线的 OpenGL 坐标
基本上，我需要获取从 OpenGL 中的贝塞尔曲线实现绘制的所有坐标。具体来说，我需要坐标来沿着弯曲的轨迹路径移动场景中的球体对象(棒球)。这是我用来绘制曲线的: GL2 gl = drawable.
java - 数学、坐标
现在我用 JAVA 遇到了一些问题，但不记得如何获取坐标系之间的长度。例如。A 点 (3,7)B点(7,59) 我想知道如何计算a点和b点之间的距离。非常感谢您的回答。 :-) 最佳答案 A = (
python - Tkinter - 坐标
我正在用 Pi2Go 机器人制作一个小项目，它将从超声波传感器获取数据，然后如果它看到一个物体，则放置一个 X，并放置 O 它当前所在的位置，我有两个问题:如何在 tkinter 上设置坐标位置？例如
python - 如何在pygame中存储对象先前的x位置(坐标)？
如何在 pygame 中存储对象的先前坐标？我的问题可能有点难以解释，但我会尽力，如果您自己尝试我的代码以理解我的意思可能会有所帮助。这就是我的游戏的内容。我希望这能让我的问题更容易理解。我正在创
ios - 获取用户当前位置/坐标
如何存储用户的当前位置并在 map 上显示该位置？我能够在 map 上显示预定义的坐标，只是不知道如何从设备接收信息。此外，我知道我必须将一些项目添加到 Plist 中。我怎样才能做到这一点？最
java - 缩放图像并将其放置在Android的LinearLayout中的特定位置(坐标)
我在 android 应用程序开发方面不是很熟练，我正在开发一个测试应用程序。我检测到了脸和眼睛，现在我要根据眼睛的坐标在脸上画一些像粉刺或疤痕的东西(例如脸颊上的眼睛下方)。稍后，我会把眼镜或帽子放
android - 人脸检测API-坐标
所以我正在使用 API 来检测图像中的人脸，到目前为止它对我来说效果很好。然而，我一直无法弄清楚如何将图像裁剪到脸上。我知道如何裁剪位图，但它需要获取位图中脸部的左上角位置以及宽度和高度。当我使用查
sql - 计算位于边界框内的点/坐标
我有 2 个表。第一个表包含以下列:Start_latitude、start_longitude、end_latitude、end_longitude、sum。 sum 列为空，需要根据第二张表进行填
ios - 获取指定城镇的随机地址/坐标
有没有办法给 Google Maps API 或类似的 API 一个城镇名称，并让它返回城镇内的随机地址？我希望能够将数据作为 JSON 获取，以便我可以在 XCode 中使用 SwiftyJSON
Python - 获取线的周边区域(坐标)
我将坐标保存在 numpy 数组 x 和 y 中。现在我想要的只是获得一个多边形(分别是点数组)，它用给定的宽度参数定义周围区域。我遇到的问题是我需要一个没有(!)交叉点的多边形。但是，当曲线很窄时
按下按钮的 Swift 坐标
我正在开发井字游戏 (3x3)，所以我有 9 个按钮，我想做的是获取用户按下的按钮的坐标，并在按钮的位置插入图像。例子: @IBOutlet weak var button1Outlet: UIBu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何在 imageMap 的精确坐标处插入一个 div