How to get the id that called a function?

Question

I am trying to do a function that displays different things when called by different ids in the tag area.

I've read the answers to similar request, but I couldn't figure out my mistakes.

function Over() {
      if (this.id == "cc") {
          el = document.getElementById("Box1")
          el.style.display = 'block';
      } else if (this.id == "mm") {
          el = document.getElementById("Box2")
          el.style.display = 'block';
      } else if (this.id == "ca") {
          el = document.getElementById("Box3")
          el.style.display = 'block';
      }
  }

  function Out() {
      if (this.id == "cc") {
          el = document.getElementById("Box1")
          el.style.display = 'none';
      } else if (this.id == "mm") {
          el = document.getElementById("Box2")
          el.style.display = 'none';
      } else if (this.id == "ca") {
          el = document.getElementById("Box3")
          el.style.display = 'none';
      }
  }

#Box1, #Box2, #Box3 {
    display: none;
    top: 250px;
    width: 20%;
    height: 100px;
    background-color: red;
    margin-left: 38%;
    position: absolute;
    border: solid;
    border-color: black;
    z-index: 100;
    border-radius: 10px;
    -moz-border-radius: 10px;
    /* firefox */
    -webkit-border-radius: 10px;
    /* safari, chrome */
    text-align: center;
}

#Box2 {
    top: 450px;
    width: 10%;
    height: 100px;
    background-color: green;
    margin-left: 18%;
}

#Box3 {
    top: 50px;
    width: 3%;
    height: 50px;
    background-color: yellow;
    margin-left: 0;
}

<img src="ticinello2.jpg" id="imgmap" alt="Mappa" usemap="#parkmap">
<map name="parkmap" id="map">
    <area shape="poly" coords="326,196,321,370,424,283,426,197" target="_blank" alt="polycc" href="#" onmouseover=Over.call(this) onmouseout="Out.call(this)" id="cc" />
    <area shape="poly" coords="426,198,554,458,457,553,328,404,324,404,324,375" target="_blank" alt="polymm" href="#" onmouseover=Over.call(this) onmouseout="Out.call(this)" id="mm" />
    <area shape="poly" coords="328,405,324,412,325,675,330,681,451,554" target="_blank" alt="polyca" id="ca" href="#" onmouseover="Over.call(this)" onmouseout="Out.call(this)" />
</map>

Answer 1

Change your function definition as follows:

function Over(elm) { 
    // get id
    var elementId = elm.id;
}

Then, usage as follows:

<area .... id="cc" onclick="Over(this);" />

When calling Over method this way, it is passing the current HTML element as argument.