1
How can I get the coordinates of a page HTML
and from these coordinates set a target/delimite (red square) dynamically (where I only change positions)
In the case of this context it would be NAY use the measures of a DIV
, but yes, to have the freedom to manipulate where I want.
Example:
Set a target at these coordinates:
bottom: 575 height: 525 left: 8 right: 512 top: 50 width: 504 x: 8 y: 50
in the example below I picked up by the dimensions of DIV
, but I would like to pass the coordinates of that target
freeform'
<!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.stack.imgur.com/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>
Dear, you don’t need to ask to mark the answer.
– Jorge.M