How to add multiple overlays at different positions in an image?-CodePudding

.reddot {
  height: 10px;
  width: 10px;
  background-color: #D03C3C;
  border-radius: 10%;
  display: inline-block;
  position: absolute;
  top: -5px;
  left:195px;
}
.reddot_2 {
  height: 10px;
  width: 10px;
  background-color: #D03C3C;
  border-radius: 10%;
  display: inline-block;
  position: absolute;
  top: 95px;
  left:135px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="position: relative; left: 0; top: 0;">
  <img src="https://i.ibb.co/z5BV8j6/l.png" alt="Map"  width="200px" height="200px">
  <div ></div>
  <div ></div>
</div>

How to add and delete multiple overlays (Red Rectangles) using simple buttons to an image and the adding of overlays would have a simple text box of top and left pixel input as shown in the CSS so that the red rectangles can be added to the position I inputted into the textbox? Any help will be appreciated :)

Thank you for reading and have a nice day!

For now, I am writing multiple red-dot classes to be overlay with the image but it is tedious. <div ></div>

CodePudding user response：

You should use Javascript to add and remove the rectangles dynamically when the buttons are pressed. Here are an example demonstrating how to add some rectangles based on a fixed list of positions. At least with the following code, you will not have to write multiple red-dot classes.

document.addEventListener("DOMContentLoaded", function(e) {
    const reddotContainer = document.getElementById('reddot-container');

    [{top: '-5px', left: '195px'},
        {top: '95px', left: '135px'},
        {top: '50px', left: '50px'},
        {top: '10px', left: '135px'}].forEach(reddotPosition => {
      const newReddot = document.createElement('div');
      newReddot.className = 'reddot';
      newReddot.style.left = reddotPosition.left;
      newReddot.style.top = reddotPosition.top;
       reddotContainer.append(newReddot);
    });
});

.reddot {
  height: 10px;
  width: 10px;
  background-color: #D03C3C;
  border-radius: 10%;
  display: inline-block;
  position: absolute;
}

<div style="position: relative; left: 0; top: 0;" id="reddot-container">
  <img src="https://i.ibb.co/z5BV8j6/l.png" alt="Map"  width="200px" height="200px">
</div>