How to mark an X in part of an image when firing a function in Javascript?

Question

I mapped an image, and with the coordinates of some parts, I made sure that by clicking on a selected part, a function is executed. But I would like to know how to mark an X or make some visual identification of the clicked part.

<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
    }
}

Answer 1

There is a way to highlight the mapped part using clip-path CSS. Just create a span inside the same div where the image is and use the same values as the attribute coords in the values of clip-path, because the coordinates are the same, only changes the syntax.

For example, the coords that’s it:

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

The clip-path would be:

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

Note that the values are the same, just separate each pair of values with a comma and add the px.

But for this you need to make some adjustments to the HTML, such as placing the image inside a div, changing the attribute href of map, use onclick to call function among other things at CSS level (see the code and adapt to your need).

In the example below, click on the mapped area (it is invisible, you need to hover near the top left corner of the image to find the clickable area):

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>