javascript - 在图片上单击位置时如何自动创建一个InputField？

Question

当用户双击图像的某个部分时，我试图显示一个突出显示的圆圈（如果 clicket 错误应该可以删除）。如果单击想要的位置，我想创建一个“ID”并在它旁边创建一个简单的输入字段。输入字段应位于可滚动的计数器/框中。我怎样才能做到这一点？

这是一个经过编辑的图片作为我希望实现的示例：

到现在为止，我只做了基础工作，比如构建页眉、页脚和侧边栏

#wrapper {
  margin-left: auto;
  margin-right: auto;
  background-color: red;
  width: 1000px;
  height: 800px;
}

#header {
  width: 100%;
  height: 100px;
  background-color: blue
}

#footer {
  width: 100%;
  height: 50px;
  background-color: green;
  clear: both;
}

#menue-right {
  width: 300px;
  height: 650px;
  background-color: black;
  float: right
}

#content {
  width: 700px;
  height: 650px;
  background-color: yellow;
  float: left;
}

#content-center {
  width: 500px;
  height: 400px;
  background-color: darkorange;
  margin: auto;
  margin-top: 125px
}

#wundbild {
  height: 400px
}

<div id="wrapper">
  <div id="header">
    <h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
  </div>
  <div id="menue-right">
  </div>
  <div id="content">
    <div id="content-center">
      <img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

标签： javascripthtmlcss