在 HTML 的热点区域内放置一个 div [重复]答案

【问题标题】：Place a div inside a hotspot area in HTML [duplicate]在 HTML 的热点区域内放置一个 div [重复]
【发布时间】：2020-09-10 13:46:05
【问题描述】：

在图像 - https://ibb.co/2tFTVx4 中，我正在尝试在热点区域内添加标记动画 - 在引脚内标记。因为使 HTML 地图交互的选项非常有限，所以我尝试通过创建动画标记并将其设置在鼠标指向的图像上的位置来实现这一点。但它并不完全位于标记区域内。

Fiddle - https://jsfiddle.net/woke_mushroom/p6rt1qjz/7/ - （图片不会显示，参考可以从https://ibb.co/2tFTVx4访问）

坐标已从https://imagemap.org/设置

代码-

<body>


  <div class="interactive-map">
    <img src="https://ibb.co/2tFTVx4" usemap="#image_map">
    <div class="location-pin" style="position:absolute"></div>
    <map name="image_map">
      <area alt="one" title="" coords="50,263,70,281" shape="rect" class="noborder icolor00ff00">
      <area alt="two" title="" coords="274,208,295,224" shape="rect">
      <area alt="two" title="" coords="150,362,172,380" shape="rect">
    </map>
  </div>
  <body>

$( 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;
    }
  }

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

谢谢！

编辑：nzn 和 Anand Shukla 提供的解决方案 add overlay in specific position in HTML map

【问题讨论】：

“图像不会显示” - 当然不会，因为您指定了一个返回 HTML 文档作为图像源的 URL，而不是实际图像.

标签： javascript html jquery css imagemap

【解决方案1】：

您想使用<area> 标签吗？这是一个例子：

<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 的位置并在点击时添加一些东西

【讨论】：

没有。我不想通过单击该区域来打开任何链接。我只想在被点击的区域显示一个 div。
@ItikaBandta 你想在点击的位置创建一个元素吗？您可以使用 document.create() 您也可以在区域标签上使用 onclick（我认为？）