Como posso pegar as coordenadas de uma página HTML
e partir dessas coordenadas setar um target/delimite(quadrado vermelho) de forma dinâmica (onde eu só altero as posições)
No caso deste contexto seria NÃO usar as medidas de uma DIV
, mas sim, ter a liberdade de manipular onde eu quiser.
Exemplo:
Setar um target nessas coordenadas:
bottom: 575 height: 525 left: 8 right: 512 top: 50 width: 504 x: 8 y: 50
no exemplo abaixo eu pego pelas dimensões da DIV
, mas gostaria de passar as coordenadas desse target
de forma 'livre'
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.square {
height: 515px;
width: 494px;
margin-top: 42px;
}
body{
}
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function() {
var el = document.getElementById('square');
var pos = getPosition(el);
$(el).css("border", "red solid 3px");
$(el).css("position", "absolute");
$(el).css("z-index", "999");
};
function getPosition(element) {
var rect = element.getBoundingClientRect();
return {x:rect.left,y:rect.top};
}
</script>
</head>
<body background="https://i.sstatic.net/sy2ru.png">
<div id="overlay"></div>
<div class="square" id="square">
<!-- <img src="C:\Users\igor.carreiro\Pictures\interface.png" height="515px" width="494px"> -->
</div>
</body>
</html>