如何在图像的不同位置添加多个叠加层？

Question

 .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" class="img-fluid" width="200px" height="200px"> <div class="reddot"></div> <div class="reddot_2"></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 class="reddot"></div>

Answer 1

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" class="img-fluid" width="200px" height="200px"> </div>