Highlight mouse click position with DIV overlay

Question

Highlight mouse click position with DIV overlay

Navigation

#1 by (1 votes)

0

I'm not able to do a DIV overlay in the place where the click event occurs. I can map the coordinates of the mouse and store these values, but I need when I click on the page, to highlight this place with a circle or a note. I can do this highlighting only by manually entering the coordinates of these coordinates in the CSS and associating with a button:

<style type="text/css"> 
  .divOverlay {
      top:586px; 
      left:647px; 
      position:absolute; 
      visibility:hidden; 
      z-index:500;
   } 
</style>

<!--Gera o DIV que exibira a marcação da local clicado -->

<script language="javascript" type="text/javascript">
function ShowOverlay(divID, xCoordinate, yCoordinate) { 
    var divObject = document.getElementById(divID); 
    divObject.style.visibility = "visible"; 
    divObject.style.left = xCoordinate; 
    divObject.style.top = yCoordinate; 
    }
</script>

the DIV that is displayed: (a red circle)

 <div id="div1" class="divOverlay"> <img src="../img/local.png" class="img-     rounded" alt="Local">  </div>

I need this highlight to occur at the click of the mouse in the clicked place.

javascript html css

asked by anonymous 21.07.2016 / 21:29

1 answer

TortoiseSVN - Database locked Query MySQL with mixed ORDER BY?

score 1 · Accepted Answer

Would you like something like this?

function ShowOverlay(divID) { 
    var divObject = document.getElementById(divID);
    var divOverlay = document.getElementById('div1'); 
    divObject.addEventListener('click', function(e){
    var x = e.pageX; 
    var y = e.pageY;
      divOverlay.style.visibility = "visible"; 
      divOverlay.style.left = x + "px"; 
      divOverlay.style.top = y + "px";
    }) 
 }
ShowOverlay("destaque");

.divOverlay {
      top:586px; 
      left:647px; 
      position:absolute; 
      visibility:hidden; 
      z-index:500;
      background: #f00;
   }

#destaque{
  width: 300px;
  height: 300px;
  background: #333;
}

<div id="div1" class="divOverlay"> <img src="../img/local.png" class="img-     rounded" alt="Local">  </div>

<br>

<div id="destaque" ></div>