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

Question

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

在您的支持下，我将尝试编写我的代码和/或使用第三方模块（即基于jquery的模块等）。我想弄明白：

1. 如何根据x / y坐标设置叠加蓝点？
2. 如何触发基于弹出窗口的辅助图像窗口？

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

Answer 1

您可以捕获大型的mousemove事件，并检查坐标是否在热点区域内。根据热点的定义方式，这或多或少都很复杂。对于圆圈，您只需检查距离中心的距离，并将其与当然半径进行比较。

如果检查成功并且当前未显示给定热点的图像，您可以将其添加到文档中或显示它，如果它已经存在但是已隐藏。

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

Answer 2

您需要使用的是<area>标记，它定义图像上的几何热点。然后，您可以使用ononmouseenter和onmouseexit来显示图片。

在这里阅读更多内容： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

来自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">