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

【问题标题】：how can create image hotspots to display images on hover effect?如何创建图像热点以在悬停效果上显示图像？
【发布时间】：2018-03-25 14:22:09
【问题描述】：

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

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

如何根据 x/y 坐标放置叠加蓝点？
如何触发基于弹出的次要图像窗口？

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

【问题讨论】：

标签： javascript html ruby-on-rails

【解决方案1】：

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

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

实施细节因您使用的工具和具体环境而异。

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的解释。请指导我如何在图像上添加“蓝点”？