0

Eu fiz um mapeamento de uma imagem, e com as coordenadas de algumas partes,fiz com que ao clicar em uma parte selecionada, uma função é executada. Mas eu gostaria de saber como marcar um X ou fazer alguma identificação visual da parte clicada.

<div>
   <img src="Esquerda.png" alt="" usemap="#Map" />
      <map name="Map" id="Map">
         <area alt="" title="Janela 1" href="javascript:janela1()" shape="poly" coords="58,138,131,116,136,56,123,44,60,43,51,60,48,94,48,120,50,136" />
      </map>
</div>
var clicado1 = false

function janela1() {

    if(!clicado1){
        let janela1 = document.createElement("option")
        janela1.text = "Janela 1 foi adicionada"
        flista.appendChild(janela1)
        valores.push('janela 1')
        //lista.push('janela 1')
                        //ainda precisa marcar um X no local clicado
        clicado1 = true
    }else{
        if (flista.length > 0 && valores.length>0) {
          flista.remove(flista.length-1)
          valores.pop()
        }

        clicado1 = false
    }
}
3
  • Considere informar o que você tentou fazer ou qual parte do código que não está funcionando. 14/11/2019 às 20:53
  • Fazer o X não é o problema. O problema compreender é o que você quiz dizer com identificação visual e qual a plataforma que você pretende implementar esse identificador visual? 14/11/2019 às 21:37
  • Tipo acontecer alguma animação ao clicar ou alguma alteração na imagem(como um X em cima da parte selecionada), pretendo implementar para Web e mobile.
    – ARTHUR PC
    14/11/2019 às 22:23

1 Resposta 1

1

Existe uma forma de destacar a parte mapeada usando clip-path do CSS. É só criar um span dentro da mesma div onde está a imagem e usar os mesmos valores do atributo coords nos valores do clip-path, porque as coordenadas são as mesmas, só muda a sintaxe.

Por exemplo, o coords é isso:

coords="58,138,131,116,136,56,123,44,60,43,51,60,48,94,48,120,50,136"

O clip-path ficaria:

clip-path: polygon(58px 138px, 131px 116px, 136px 56px, 123px 44px, 60px 43px, 51px 60px, 48px 94px, 48px 120px, 50px 136px);

Repare que os valores são os mesmos, apenas é preciso separar cada par de valores com uma vírgula e acrescentar o px.

Mas para isso é preciso fazer alguns ajustes no HTML, como colocar a imagem dentro de uma div, alterar o atributo href do map, usar onclick para chamara função entre outras coisas a nível de CSS (veja no código e adapte à sua necessidade).

No exemplo abaixo, clique na área mapeada (ela é invisível, é preciso passar o mouse perto do canto superior esquerdo da imagem para achar a área clicável):

var clicado1 = false

function janela1(e) {
   e.preventDefault();
   
   var mapa = e.target;

    if(!clicado1){
       
        let janela1 = document.createElement("option")
        janela1.text = "Janela 1 foi adicionada"
//        flista.appendChild(janela1)
//        valores.push('janela 1')
        //lista.push('janela 1')
                        //ainda precisa marcar um X no local clicado
        clicado1 = true
    }else{
       
//        if (flista.length > 0 && valores.length>0) {
//          flista.remove(flista.length-1)
//          valores.pop()
//        }

        clicado1 = false
    }
    
       var coordenadas = mapa.getAttribute("coords");
       var coords_array = coordenadas.split(",");
       var coords_clip = '';
       
       for(let i in coords_array){
          if(i%2 == 0) coords_clip += coords_array[i]+"px "+coords_array[+i+1]+"px,"
       }
       
       coords_clip = coords_clip.substr(0, coords_clip.length-1);

        let span = document.createElement("span");
        span.className = "clip";
        span.setAttribute("onclick", "this.outerHTML=''");
        span.style = "clip-path: polygon("+coords_clip+");";

       document.getElementById("container").appendChild(span);
}
#container{
   width: 630px;
   height: 354px;
   position: relative;
}

.clip{
   display: inline-block;
   width: 100%;
   height: 100%;
   background: red;
   position: absolute;
   top: 0px;
   left: 0px;
}
<div id="container">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" usemap="#Map" />
   <map name="Map" id="Map">
      <area onclick="janela1(event)" alt="" title="Janela 1" href="#" shape="poly" coords="58,138,131,116,136,56,123,44,60,43,51,60,48,94,48,120,50,136" />
   </map>
</div>

4
  • E como eu posso fazer pra essa parte marcada de vermelho sumir e voltar como estava antes, tipo pra quando clicar de novo remover essa marcação vermelha?
    – ARTHUR PC
    15/11/2019 às 1:55
  • Dah pra fazer. Quando eu chegar em casa eu atualizo a resposta ok.
    – Sam
    15/11/2019 às 2:28
  • Alterei a resposta.
    – Sam
    15/11/2019 às 14:09
  • Eu resolvi tirar essa parte do select(flista) e deixar apenas o array armazenando quais partes foram clicadas, só que o último detalhe q falta é quando clica novamente pra tirar a parte vermelha essa parte clicada n é removida do array, tem como resolver isso? Eu coloquei o código todo e expliquei um pouco melhor,só falta esse detalhe de remover do array pra quando clicar em continuar só retornarem as partes que foram selecionadas. pt.stackoverflow.com/questions/421755/…
    – ARTHUR PC
    16/11/2019 às 12:19

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 .