FSS FSS - 3 months ago 26
HTML Question

Show overlay id using mousemove

Thanks to a really helpful user on this website (whose name I do not know, but I wish to thank and credit him!), I got the following tip on how to store area elements in an array so that when I mouse over a coordinate, I could display all of the overlay id's of the area elements that existed at that coordinate (even if the area elements were not at the same z-level):

I'm just stuck on one thing- once I have gathered all the elements that exist at the coordinate in the hoveredElements array, how do I show their overlay ids?

EDIT:
Here is an example of the full code (the overlay still does not display when I mouse over)

The file test.txt contains:


cscCSL1A15 700 359 905 318
cscCSL1A14 794 400 905 318


I use the maphilight plugin available online, and blanketaphi.png is the plot I use as a background.

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

Answer

Why not just something like this:

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