I need to mount a kind of map, where the user clicks on a button that is in the x, y coordinate of an image and a modal opens.
I can not use background-image for this, so I put the image with
z-index: -1 , now I need to create some buttons and position on the image.
In this project I'm using HTML, CSS (Bootstrap) and JQuery on the front end.
You can do it this way. It is a very simple example but I think it will serve you.
You can use the .p1 .p2 etc classes to build your X Y placement using transform:translate(X, Y)
See the template below to understand better
.rela {
position: relative;
}
.rela img {
object-fit: cover;
}
.btn {
position: absolute;
top: 0;
left: 0;
padding: 0.5em;
background-color: aqua;
}
.btn.p1{
transform: translate(50px, 50px);
}
.btn.p2{
transform: translate(100px, 100px);
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
<div class="col-xs-6 rela">
<img src="http://placecage.com/400/400"alt="" width="100%" height="400px">
<div class="btn p1">Meu BTN 1</div>
<div class="btn p2">Meu BTN 2</div>
</div>
</div>OBS: This answer can also help if you want something more responsive with% etc # 273887 # 273887 "> How to map an image to work responsively
Have you tried using the following click event properties: screen / clientX and screen / clientY?
Instead of putting button elements in the image, you only compares the click coordinate with the image coordinate of the image you see as a "clickable" region to show the modal.
Using clientX and clientY you get the coordinates of the DOM where the click was, so you can display the modal with the following logic:
handleImageClick(event){
let x = event.clientX;
let y = event.clientY;
// Coordenadas
if (x === coord_modal1_x && y === coord_modal1_y) {
// mostre o modal 1
}
}
NOTE: The coordinates are long, so make the coordinates "clickable" to long. Reference: link