Javascript 如何创建图像热点以在悬停效果上显示图像？

我想在我的rails应用程序上创建图像热点，在悬停期间弹出屏幕显示另一个图像，如下图所示

在您的支持下，我将尝试编写代码和/或使用第三方模块（即基于jquery的模块等）来完成某些部分。我想弄清楚：

如何基于x/y坐标放置重叠蓝点

如何触发基于弹出窗口的次映像窗口

如果您能为此提供代码片段和指南，我将不胜感激

---

您可以捕获大屏幕的

mousemove

事件，并检查坐标是否在热点区域内。根据热点的定义，这或多或少会比较复杂。对于圆，你只需检查距离中心的距离，并将其与半径进行比较即可

如果检查成功，并且给定热点的图像当前未显示，则可以将其添加到文档中，或者显示该图像（如果该图像已存在但已隐藏）

---

具体实施细节取决于您使用的工具和具体环境。

您需要使用的是

来自MDN的示例代码使用圆，也可以使用矩形或任何多边形

<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left">
  <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

谢谢您的解释。请你指导我如何在图像上也加上“蓝点”好吗？