Não estou conseguindo fazer uma sobreposição de DIV no local onde tem o evento clic. Consigo mapear as coordenadas do mouse e armazenar estes valores, mas preciso que quando clicar na pagina, seja destacado este local com um circulo ou um apontamento qualquer. Consigo fazer este destaque somente informando as coordenadas manualmente estas coordenadas no CSS e associando a um botão:
<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>
o DIV que é apresentado:(um circulo vermelho)
<div id="div1" class="divOverlay"> <img src="../img/local.png" class="img- rounded" alt="Local"> </div>
Preciso que este destaque ocorra no clique do mouse no local clicado.