Position div or button inside a specific point of an image

Asked

Viewed 699 times

3

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’t use the 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 am using HTML, CSS(Bootstrap) and Jquery in front-end.

javascript html jquery css twitter-bootstrap

  • See if this is what you want: http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript In this example you can get the strings

  • Thank you so much for the help, but I can’t depend on the click to know the coordinate, I need to load the page with the buttons already positioned

2 answers

4


You can do it this way. It’s a very simple example but I think it will suit you.

You can use the classes .p1 .p2 etc to build your positioning X Y using transform:translate(X, Y)

See the template below to better understand

.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 response can also help you if you want something more responsive with % etc How to map an image to function responsive

  • It looks perfect, I’ll try and answer if it worked for me

  • Legal @Otaviosouzarocha any doubt tell me. This link I put in OBS has another model I did that can sometimes serve you too. [] s

  • I had to use the link method, because I need it to work responsibly, but it worked, thank you very much!!!!

  • @Otaviosouzarocha legal that worked. The other method I also prefer, only when I did I didn’t take into account the grid of Bootstrap... vlw!

0

You have tried the following "click" event properties: screen/clientX and screen/clientY?

Instead of placing button-like elements in the image, Oce only compares the click coordinate with the image ugar coordinate that Oce considers a "clickable" region to show the modal.

Using clientX and clientY Voce get the DOM coordinates where the click was, this way Voce 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 type, so turn the "clickable" coordinates to long. Reference: https://developer.mozilla.org/en-US/docs/Web/Events/click

Browser other questions tagged javascript html jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.