0

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.

1 Resposta 1

1

Desejava algo parecido com isto?

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>

5
  • Exato.... este resultado é o esperado, porem que permaneça visivel ao invés de desaparecer após alguns segundos, mas isso é facil de corrigir, Commented 21/07/2016 às 19:59
  • @FelipeOliveira resolvi brincar um pouco com o exemplo do Samir jsfiddle.net/f2d7ent3 (sei que não está fazendo o que espera, mas pode vir a lhe ser util no futuro). Commented 21/07/2016 às 20:17
  • @FelipeOliveira, agora não desaparece mais :), era só isso mesmo? Commented 21/07/2016 às 20:42
  • @TobyMosque, realmente, ficou bem interessante. Gostei, deixando tudo em 0.4s, principalmente Commented 21/07/2016 às 20:42
  • consigo recuperar as coordenadas salvas, mas como faço para quando carregar a pagina, por a marcação nestas coordenada? Commented 29/07/2016 às 14:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .