Показать оверлейный идентификатор, используя mousemove

Благодаря действительно полезному пользователю на этом сайте (чье имя я не знаю, но я хочу поблагодарить его и поблагодарить!), Я получил следующий совет о том, как хранить элементы области в массиве так что, когда я нажимаю на координату, я мог бы отображать все оверлейные идентификаторы элементов области, которые существовали в этой координате (даже если элементы области не были на том же уровне z):Показать оверлейный идентификатор, используя mousemove

Я просто застрял на одном - как только я собрал все элементы, которые существуют в координате в массиве hoveredElements, как показать свои идентификаторы наложения?

EDIT: Вот пример полного кода (наложение еще не отображается, когда я мыши над)

Файл test.txt содержит: cscCSL1A15 700 359 905 318 cscCSL1A14 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>

источник

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 в массив elementsPositions. Судя по вашему описанию, это не то, что вы хотите сделать, вы, вероятно, захотите загрузить все элементы внутри 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>

Edit: жаль, что я добавил неопределенные тесты, фиксируя это из бесконечного цикла, но я думаю, что они на самом деле не необходимо. Тем не менее приятно иметь хотя. Кроме того, поскольку область также перемещается в область зависания, этот скрипт пытается показать элемент с именем overlayoverlayr6064r6064, которого, к счастью, не существует. Но, опять же, возможно, не то, что вы имели в виду.

источник

2016-08-14 01:48:55

Просто собираюсь поместить это там и сказать, что я все еще не уверен, чего вы пытаетесь достичь со всем этим, было бы проще показать скрытый материал, когда вы наводите мышку над самим элементом, вместо того, чтобы хранить все это в массив. Я понимаю, что z-index может быть болью, но какое-то тщательное планирование может решить все это –

Да, я всего лишь новичок. Мне нужно увидеть все z-слои под координатой, и это казалось самым простым способом. Если у вас есть другие предложения, я с радостью их возьму! – FSS

Каждый человек в какой-то момент. Я думаю, что если вы намереваетесь иметь перекрывающиеся слои, тогда это не так уж плохо, но вы, вероятно, должны удалить эту часть об append для 'hover', так как это может беспорядочно испортить материал. Также вы можете добавить селектор к методу 'children', чтобы получить только элементы' area', такие как 'children ('area')', которые затем решат проблему 'overlayoverlayr6064r6064'. Удачи с вашим приложением, независимо от того, что это может быть –

Показать оверлейный идентификатор, используя mousemove

ответ

Смежные вопросы