Javascript 使用mousemove显示覆盖id_Javascript_Jquery_Html

Javascript 使用mousemove显示覆盖id

javascript jquery html

Javascript 使用mousemove显示覆盖id,javascript,jquery,html,Javascript,Jquery,Html,多亏了这个网站上一位非常有用的用户（我不知道他的名字，但我想感谢他！），我得到了以下关于如何在数组中存储面积元素的提示，这样当我将鼠标悬停在坐标上时，我就可以显示该坐标上存在的面积元素的所有覆盖id（即使面积元素不在同一z级别）：我只停留在一件事上——一旦我收集了hoveredElements数组中坐标处存在的所有元素，我如何显示它们的覆盖ID 编辑：下面是完整代码的一个示例（当我将鼠标悬停在上面时，覆盖仍不显示）文件test.txt包含： CSCL11A15 700 359 905 3

多亏了这个网站上一位非常有用的用户（我不知道他的名字，但我想感谢他！），我得到了以下关于如何在数组中存储面积元素的提示，这样当我将鼠标悬停在坐标上时，我就可以显示该坐标上存在的面积元素的所有覆盖id（即使面积元素不在同一z级别）：

我只停留在一件事上——一旦我收集了hoveredElements数组中坐标处存在的所有元素，我如何显示它们的覆盖ID

编辑：下面是完整代码的一个示例（当我将鼠标悬停在上面时，覆盖仍不显示）

文件test.txt包含：


CSCL11A15 700 359 905 318
CSCL1A14 794 400 905 318

我使用在线提供的maphilight插件，blanketaphi.png是我用作背景的绘图

<!DOCTYPE html>
<html>
<head>
<title>Detector Elements</title>
<script type="text/javascript"
src="Demo_imagemap_highlight_files/jquery-1.js"></script>

<!-- add maphilight plugin -->
<script type="text/javascript" 
src="Demo_imagemap_highlight_files/jquery_002.js"></script>
</head>
<body>
<div class="content">
<div class="map" 
style='display: block; background: transparent 
url("Demo_imagemap_highlight_files/blanketaphi.png") 
repeat scroll 0% 0%; position: relative; padding: 0px; width: 1037px; 
height: 557px;'>
<canvas width="1037" height="557" style="width: 1037px; height: 557px; 
position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; 
opacity: 1;"></canvas>

<img style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; 
border: 0px none;" src="Demo_imagemap_highlight_files/blanketaphi.png" 
alt="foo" class="map maphilighted" usemap="#demo" height="557" width="1037" 
border="0" />
</div>
</div>

<map name="demo" id="demo"></map>

</body>
</html>

<script type="text/javascript">
window.onload = function(){
var f = (function(){ 
  var xhr = [];
  var files = [ "test.txt"];
  for (i = 0; i < 1; i++) {
    (function (i){ 
      xhr[i] = new XMLHttpRequest();
      xhr[i].open("GET", files[i], true);
      xhr[i].onreadystatechange = function () {
        if (xhr[i].readyState == 4 && xhr[i].status == 200) { 
          // get text contents
          j=20000*i + 50000;
          var coords = xhr[i].responseText.split("\n");
          coords = coords.filter(Boolean) //prevents extra rect with 0 coords
          coords.forEach(function(coord) { 
            var area = document.createElement("area");
            var att = document.createAttribute("data-maphilight"); 
            if (i == 0) { //green
              att.value = '{"strokeColor":"000000","strokeWidth":2,' + 
                  '"fillColor":"009900","fillOpacity":0.5}';
            }
            area.setAttributeNode(att);
            area.id = "r"+j;
            area.shape = "rect";
            area.coords = coord.substring(10,coord.length).trim()
            .replace(/ +/g,","); // replaces spaces in txt file with commas
            area.href = "#";
            area.alt = "r"+j;
            // create overlay with first term in string
            var div = document.createElement("div");
            div.id ="overlayr"+j;
            div.innerHTML = coord.substring(0,10);
            div.style.display = "none";
            //increase j
            j++;

            // get map element
            document.getElementById("demo").appendChild(area);
            document.getElementById("demo").appendChild(div);
          });
          $('.map').maphilight(); 
          //display overlay ids by mousing over
          var elementPositions = [];
          var hoveredElements = [];

          if($('#demo')) { 
            $('#demo area').each(function() {
              var offset = $(this).offset();

              var top = offset.top;
              var left = offset.left;

              var bottom = $(window).height() - top - $(this).height();
              var right = $(window).width() - left - $(this).width();

              elementPositions.push({ 
                element: $(this), 
                top: top, 
                bottom: bottom, 
                left: left, 
                right: right 
              });
              //alert(top + "," + left + "," + right + "," + bottom);
            }); 
            $("body").mousemove(function(e) {
              hoveredElements = [];

              var yPosition = e.pageX;
              var xPosition = e.pageY;


              for (var i = 0; i < elementPositions.length; i++) { 
                if (xPosition >= elementPositions[i].left && 
                xPosition <= elementPositions[i].right &&
                yPosition >= elementPositions[i].top &&
                yPosition <= elementPositions[i].bottom) {
                  // The mouse is within the element's boundaries
                  $("#hovers").append(elementPositions[i].element); 
                } 
              } 

              for (var i = 0; i < hoveredElements.length; i++) { 
                // The element as a jQuery object
                var elem = hoveredElements[i];
                var id = hoveredElements[i].attr('id');
                $('#overlay'+id).show();
              }
            });
          }; 
        } 
      }; 
      xhr[i].send();
    })(i); 
  } 
})();
};
</script>


探测器元件
window.onload=函数（）{
变量f=（函数（）{
var xhr=[]；
var文件=[“test.txt”]；
对于（i=0；i<1；i++）{
（职能（i）{
xhr[i]=新的XMLHttpRequest（）；
xhr[i]。打开（“GET”，文件[i]，true）；
xhr[i].onreadystatechange=函数（）{
如果（xhr[i].readyState==4&&xhr[i].status==200）{
//获取文本内容
j=20000*i+50000；
var coords=xhr[i].responseText.split（“\n”）；
coords=coords.filter（布尔）//防止使用0个coords的额外rect
forEach（函数（coord）{
var区域=document.createElement（“区域”）；
var att=document.createAttribute（“数据映射灯”）；
如果（i==0）{//绿色
att.value='{“strokeColor”：“000000”，“strokeWidth”：2，+
““fillColor”：“009900”，“fillOpacity”：0.5}”；
}
区域。设置属性节点（att）；
area.id=“r”+j；
area.shape=“rect”；
area.coords=coord.substring（10，coord.length）.trim（）
.replace（//+/g，“，”；//用逗号替换txt文件中的空格
area.href=“#”；
area.alt=“r”+j；
//使用字符串中的第一个术语创建覆盖
var div=document.createElement（“div”）；
div.id=“overlayr”+j；
div.innerHTML=coord.substring（0,10）；
div.style.display=“无”；
//增加j
j++；
//获取映射元素
document.getElementById（“demo”）.appendChild（区域）；
document.getElementById（“demo”）.appendChild（div）；
});
$（'.map'）.maphilight（）；
//通过鼠标悬停在上方显示覆盖ID
var elementPositions=[]；
var hoveredElements=[]；
如果（$（'#demo'）{
$（“#演示区”）。每个（函数（）{
var offset=$（this.offset（）；
var top=offset.top；
var left=offset.left；
var bottom=$（window.height（）-top-$（this.height（））；
var right=$（window.width（）-left-$（this.width（））；
elementPositions.push（{
元素：$（此），
顶:顶,，
底部：底部，
左:左,，
对:对
});
//警报（顶部+”、“+左侧+”、“+右侧+”、“+底部）；
}); 
$（“body”）.mousemove（函数（e）{
悬停元素=[]；
变量yPosition=e.pageX；
var xPosition=e.pageY；
对于（var i=0；i=elementPositions[i].左&&
xPosition=elementPositions[i]。顶部&&
i位置为什么不这样做：
var elementPositions = [];
var hoveredElements = [];

if($('#demo')) { 
      $('#demo area').each(function() {
        var offset = $(this).offset();

        var top = offset.top;
        var left = offset.left;

        var bottom = $(window).height() - top - $(this).height();
        var right = $(window).width() - left - $(this).width();

        elementPositions.push({ element: $(this), top: top, bottom: bottom, left: left, right: right });
      //alert(top + "," + left + "," + right + "," + bottom);
      }); 

      $("body").mousemove(function(e) {
        hoveredElements = [];

        var yPosition = e.pageX;
        var xPosition = e.pageY;


        for (var i = 0; i < elementPositions.length; i++) { 
          if (xPosition >= elementPositions[i].left && 
          xPosition <= elementPositions[i].right &&
          yPosition >= elementPositions[i].top &&
          yPosition <= elementPositions[i].bottom) {
        // The mouse is within the element's boundaries
                hoveredElements.push(elementPositions[i].element);
                $("#hovers").append(elementPositions[i].element); 
                 } 
        } //end of for loop over all elements

       console.log(hoveredElements);

        for (var i = 0; hoveredElements.length; i++)
        { //for loop over all hovered elements
          // The element as a jQuery object
          var elem = hoveredElements[i];
          var id = hoveredElements[i].attr('id');
          console.log(id);
          $('#overlay'+id).show();
          // Do stuff to that jQuery element:
          //??? something like elem.show();
        }

var elementPositions=[]；
var hoveredElements=[]；
如果（$（'#demo'）{
$（“#演示区”）。每个（函数（）{
var offset=$（this.offset（）；
var top=offset.top；
var left=offset.left；
var bottom=$（window.height（）-top-$（this.height（））；
var right=$（window.width（）-left-$（this.width（））；
push（{element:$（this），top:top，bottom:bottom，left:left，right:right}）；
//警报（顶部+”、“+左侧+”、“+右侧+”、“+底部）；
}); 
$（“body”）.mousemove（函数（e）{
悬停元素=[]；
变量yPosition=e.pageX；
var xPosition=e.pageY；
对于（var i=0；i=elementPositions[i].左&&
xPosition=elementPositions[i]。顶部&&
i位置为什么不这样做：
var elementPositions = [];
var hoveredElements = [];

if($('#demo')) { 
      $('#demo area').each(function() {
        var offset = $(this).offset();

        var top = offset.top;
        var left = offset.left;

        var bottom = $(window).height() - top - $(this).height();
        var right = $(window).width() - left - $(this).width();

        elementPositions.push({ element: $(this), top: top, bottom: bottom, left: left, right: right });
      //alert(top + "," + left + "," + right + "," + bottom);
      }); 

      $("body").mousemove(function(e) {
        hoveredElements = [];

        var yPosition = e.pageX;
        var xPosition = e.pageY;


        for (var i = 0; i < elementPositions.length; i++) { 
          if (xPosition >= elementPositions[i].left && 
          xPosition <= elementPositions[i].right &&
          yPosition >= elementPositions[i].top &&
          yPosition <= elementPositions[i].bottom) {
        // The mouse is within the element's boundaries
                hoveredElements.push(elementPositions[i].element);
                $("#hovers").append(elementPositions[i].element); 
                 } 
        } //end of for loop over all elements

       console.log(hoveredElements);

        for (var i = 0; hoveredElements.length; i++)
        { //for loop over all hovered elements
          // The element as a jQuery object
          var elem = hoveredElements[i];
          var id = hoveredElements[i].attr('id');
          console.log(id);
          $('#overlay'+id).show();
          // Do stuff to that jQuery element:
          //??? something like elem.show();
        }

var elementPositions=[]；
var hoveredElements=[]；
如果（$（'#demo'）{
$（“#演示区”）。每个（函数（）{
var offset=$（this.offset（）；
var top=offset.top；
var left=offset.left；
var bottom=$（window.height（）-top-$（this.height（））；
var right=$（window.width（）-left-$（this.width（））；
push（{element:$（this），top:top，bottom:bottom，left:left，right:right}）；
//警报（顶部+”、“+左侧+”、“+右侧+”、“+底部）；
}); 
$（“body”）.mousemove（函数（e）{
悬停元素=[]；
变量yPosition=e.pageX；
var xPosition=e.pageY；
对于（var i=0；i=elementPositions[i].左&&
xPosition=elementPositions[i]。顶部&&
yPosition你这里有很多对我来说没有意义的东西，但以下是我目前能收集到的。
您的区域需要位于一个名为demo-area
的容器中。不确定ID中的空间是如何工作的，因此在我的例子中，我将其切换到demo-area
。在页面的某个地方，必须有另一个名为demo
的元素才能发生任何事情
完成后，脚本将demoarea加载到elementPositions数组中
$('#demoarea').children().each(function() {

<div style="display:none" id="overlayr6064"> Example Overlay ID name </div>

<div id="overlayr6064"> Example Overlay ID name </div>

<style>
    #demoarea div {
        display: none;
    }
    #hover div {
        display: block;
    }
</style>

for (var i = 0; hoveredElements.length; i++)

for (var i = 0; i < hoveredElements.length; i++)