関数を呼び出したIDを取得する方法は？

Question

私は、タグ領域内の異なるIDで呼び出されたときに異なることを表示する関数を実行しようとしています。

私は同様のリクエストに対する回答を読んだが、私の間違いを理解することはできなかった。

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

次のように関数定義を変更し

：

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

を次に、使用状況を次のように：

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

このようOverメソッドを呼び出すとき、それが通過しているが現在のHTML要素を引数。