3

Preciso montar uma espécie de mapa, onde o usuário clica sobre um botão que está na coordenada x,y de uma imagem e um modal abre.

Eu não posso usar o background-image para isso, então coloquei a imagem com z-index: -1, agora eu preciso criar alguns botões e posicionar sobre a imagem.

Nesse projeto eu estou utilizando HTML,CSS(Bootstrap) e JQuery no front-end.

2
  • Veja se é isto que pretende: emanueleferonato.com/2006/09/02/… Nesse exemplo tem como obter as cordenadas Commented 9/05/2018 às 13:38
  • Muito obrigado pela ajuda, mas eu não posso depender do click para saber a coordenada, preciso carregar a página com os botões já posicionados Commented 9/05/2018 às 14:02

2 Respostas 2

4

Vc pode fazer dessa forma. É um exemplo bem simples mas acho que vai te servir.

Vc pode usar as classes .p1 .p2 etc para construir seu posicionamento X Y usando transform:translate(X, Y)

Veja o modelo abaixo para entender melhor

.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: Essa resposta também pode te ajudar caso queira algo mais responsivo com % etc Como mapear uma imagem para funcionar responsivo

4
  • Parece perfeito, vou tentar e respondo se funcionou para mim Commented 9/05/2018 às 14:02
  • Legal @OtavioSouzaRocha qualquer dúvida me fala. Esse link que eu coloquei na OBS tem outro modelo que fiz que as vezes pode te servir tb. []´s
    – hugocsl
    Commented 9/05/2018 às 14:08
  • tive que utilizar o metodo do link, porque preciso que funcione responsivamente, mas funcionou, muito obrigado!!!! Commented 9/05/2018 às 14:37
  • @OtavioSouzaRocha legal que deu certo. O outro método eu também prefiro, só que quando fiz não levei em conta o grid do Bootstrap... vlw!
    – hugocsl
    Commented 9/05/2018 às 14:52
0

Já tentou usar as seguintes propriedades do evento "click": screen/clientX e screen/clientY?

Ao invés de colocar elementos do tipo button na imagem, voce apenas compara a coordenada do clique com a coordenada do ugar da imagem que voce considera uma região "clicável" para mostrar o modal.

Usando clientX e clientY voce obtem as coordenadas do DOM onde foi o clique, dessa maneira voce pode exibir o modal com a seguinte lógica:

handleImageClick(event){
  let x = event.clientX;
  let y = event.clientY;
  // Coordenadas 
  if (x === coord_modal1_x && y === coord_modal1_y) {
    // mostre o modal 1
  }

}

OBS: as coordenadas são do tipo long, então transforme as coordenadas "clicáveis"para long. Referencia: https://developer.mozilla.org/pt-BR/docs/Web/Events/click

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .