mousemoveを使ってオーバーレイIDを表示

本当に有益なこのウェブサイト（その名前はわかりませんが、彼に感謝したいと思います）のおかげで、エリア要素を配列に格納する方法に関する以下のヒントを得ました座標上にマウスを置くと、その座標に存在するエリア要素のオーバーレイIDをすべて表示することができます（エリア要素が同じZレベルにない場合でも）：mousemoveを使ってオーバーレイIDを表示

私はちょうど1つのことに固執する - hoveredElements配列の座標に存在するすべての要素を集めたら、どのようにオーバーレイIDを表示するのですか？

EDIT：ここは完全なコードの例である（ときIマウスオーバーオーバーレイはまだ表示されません）

ファイルtest.txtのが含まれています私はmaphilightプラグインが利用可能に使用 cscCSL1A15 700 359 905 318 cscCSL1A14 794 400 905 318

online、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>

出典

2016-08-13 FSS

'var id = this.id;を試してください。 $（ 'div'）。mouseenter（function（）{ $（ '＃overlay' + id）.show（）; }）; –

ラムはもう一つの素晴らしい提案ですが、まだ何も表示されていません。たぶんあなたは私が見たいと思っているものの考えを持つことができるように、与えられた時間にhoveredElementsにあるものをどのように見つけることができるのかを知っているかもしれません... – FSS

このような理由だけではなく、何か：

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

出典

2016-08-13 23:27:17

ありがとうございます。たぶんあなたは、特定の時間にhoveredElementsの中に何があるのかを知ることができると思っています。 – FSS

申し訳ありませんが、私は 'hoveredElements'配列実際にそれに何か追加されていませんでした。私はそうするためにコードを更新しました、今それを試してください。 –

もう一度ありがとうございますが、ダイスはありません。問題をデバッグする方法についての提案はありますか？デバッガは何も見つけず、コードは正常に動作しますが、何も表示されません。 – FSS

あなたは私には意味がありません。ここで多くのものを得たが、ここで私はこれまで集めることができるものだきました。あなたのエリアはdemo areaというコンテナ内にある必要があります。私の場合、IDのスペースがどのように機能するのかわからないので、demoareaに切り替えました。ページのどこかに、demoという別の要素がなければなりません。

これが完了すると、スクリプトによってdemoareaがelementPositions配列に読み込まれます。あなたの説明からあなたがしたいことではないと判断して、demoarea内のすべての要素を配列にロードしたいと思うかもしれません。だから、最初の変更は

$('#demo area').each(function() {

は今、私には混乱となり何

$('#demoarea').children().each(function() {

になる何らかの理由のために、このスクリプトは、hoverと呼ばれる別の要素を持っている必要と判断したということですので、それはアウト要素を移動することができますdemoareaをhoverにドラッグします。それがあなたの望むものなら、シンプルなCSSでショートリックをすることができます。

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

は、それはあなたが望んでいないと仮定すると、@liamEganはhoveredElements配列に要素を追加するために何をしたか、良いですあなたは無限ループをここに持っています

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

それが最後の事を除いて、あなたのスクリプトにこれらのリスナーをロードしたい...

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

が続いて残りは働くべきであるとき、文書準備の方法でページがロードされます。

//display overlay ids by mousing over (my map is called 'demo') 
 
var elementPositions = []; 
 
var hoveredElements = []; 
 

 
if($('#demo')) { 
 
    $('#demoarea').children().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 }); 
 
    }); 
 
    console.log('After Scanning demoarea elementPositions looks like:') 
 
    console.log(elementPositions); 
 
    
 
    $(document).ready(function() { 
 
    $("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 
 
      if (typeof elementPositions[i].element != "undefined") { 
 
      hoveredElements.push(elementPositions[i].element); 
 
      $("#hovers").append(elementPositions[i].element); 
 
      } 
 
     } 
 
     } //end of for loop over all elements 
 

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

#demoarea { 
 
    border: 2px blue dotted; 
 
} 
 
/* Border added so I can see where to mouse over */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="demo"> 
 
    <div id="demoarea"> 
 
    <area shape="rect" coords="431,499,458,491" href="#" id="r6064" alt="r6064"> 
 
    <div style="display:none" id="overlayr6064"> Example Overlay ID name </div> 
 
    </div> 
 
    <div id="hovers"> 
 
    </div> 
 
</div>

編集：申し訳ありませんので、無限ループのこれを固定しながら、私は未定義のテストを追加しましたが、私は彼らが本当にないだと思う、それは少しのように見えるすべてでそう

必要です。しかし、まだ持っていいです。また、領域もホバリング領域に移動するので、このスクリプトはoverlayoverlayr6064r6064という要素を表示しようとしますが、これは幸運にも存在しません。しかし、もう一度、おそらくあなたが思いついたことではないでしょう。

出典

2016-08-14 01:48:55

ちょうどそこに置いて、これで達成しようとしていることがまだ分かっていないとすれば、エレメント自体の上にマウスを置くと隠すことが簡単になりますアレイ。私は、Z - インデックスが痛みを伴うことができます理解していますが、いくつかの慎重な計画は、すべてを解決することができます –

はい、私はちょうど初心者です。私は座標の下にあるすべてのzレイヤーを見る必要があり、これは最も単純な方法のようです。あなたは他の提案があれば、私は喜んでそれらを取る！ – FSS

誰もが初心者です。私はあなたが重複しているレイヤーを持っているつもりなら、これはそれほど悪いことではないと思いますが、何の理由もなく混乱させる可能性があるので、おそらくその部分を 'ホバリング 'に追加するべきです。また、 'children'メソッドにセレクタを追加して' children（ 'area'） 'のような' area'要素だけを取得し、 'overlayoverlayr6064r6064'の問題を解決できます。あなたのアプリの運が良かったら、それは何でも –

mousemoveを使ってオーバーレイIDを表示

答えて

関連する問題