Highlight mouse click position with DIV overlay

Question

I’m not getting a DIV overlay on the location where the clic event is. I can map the coordinates of the mouse and store these values, but I need when you click on the page, to highlight this location with a circle or a note. I can do this highlighting by just entering the coordinates manually in the CSS and associating them to 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 which is presented:(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 mouse click on the clicked location.

Answer 1

I wish I had 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>