I have the following code that will create delimiters ( target ) according to the past coordinates.
But I wanted these targets to remove the overlay
<!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><scripttype="text/javascript">
window.onload = function() {
var x, y, w, h;
//y = TOP - medidas em %;
//x = LEFT - medidas em %;
var coordenadas =
[
{w: 400, h: 400, x: 10, y: 10},
{w: 100, h: 100, x: 50, y: 50}
];
changeSquare(coordenadas);
};
function changeSquare(coordenadas){
for (let i = 0; i < coordenadas.length; i++) {
var div= document.createElement("div");
div.setAttribute( "id", i);
div.setAttribute("style","top:" + coordenadas[i].y + "%" + ";" + "left:" + coordenadas[i].x + "%" + ";" + "height:" + coordenadas[i].h + "px" + ";"
+ "width:" + coordenadas[i].w + "px" + ";" + "position: absolute; border: red solid 3px; z-index: 999");
document.body.appendChild(div);
}
}
</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>