Javascript 在HTML中的热点区域内放置一个div

在图像-，我试图在热点区域内添加一个标记动画-标记在管脚内。由于使HTML地图具有交互性的选项非常有限，我试图通过创建一个动画标记并将其位置设置在鼠标指向的图像上来实现这一点。但它并不完全在标记区域内

小提琴---（图像不会显示，可从中访问以供参考）

坐标是从

代码-

如何将此标记准确设置在热点区域内？或者如果有更好的方法，请建议

谢谢

---

编辑：nzn和Anand Shukla在上给出的解决方案

是否要使用

标签？ 以下是一个例子：

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

您可以在w3schools中看到输出：

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

还是我把问题搞错了

编辑：document.create（）？然后设置新创建元素的样式

---

Edit2：或者使用position relative来设置div的位置，并在单击时添加内容

“图像不会显示”-当然不会，因为您指定了一个URL，该URL将HTML文档返回为图像源，而不是实际的图像。否。我不希望通过单击该区域打开任何链接。我只想在单击的区域上显示一个div。@ItikaBandta是否要在单击的位置创建元素？您可以使用document.create（），也可以在区域标记上使用onclick（我想是吧？）

$( document ).ready(function() {
    $('.location-pin').hide();
  });
  
  $('area').click(function(e)
  {
  const marker = document.querySelector('.location-pin');
  $(marker).show();
  marker.style.top = e.pageY+'px';
  marker.style.left = e.pageX+'px';
  });

area{
    cursor: pointer;
    background-color: violet;
    
  }

  
  .location-pin {
    width: 20px;
    height: 20px;
    background: rgb(255, 43, 5);  
    border: 2px solid #FFF;
    border-radius: 50%;
    animation: pulsate 2400ms ease-out infinite;
  }
  
  @keyframes pulsate {
    0% {
    transform: scale(0.1);
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
    100% {
    transform: scale(1.2);
    opacity: 0;
    }
  }

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>