如何在悬停时使图像部分发光[关闭]答案

【问题标题】：How to make sections of image glow on hover [closed]如何在悬停时使图像部分发光[关闭]
【发布时间】：2015-12-02 16:43:28
【问题描述】：

我将为一个与当地军团有牵连的人创建一个网站。他恢复了军团的照片。他希望将鼠标悬停在照片中的每个人身上，让他们的轮廓发光，并显示他们姓名的工具提示，和/或链接到页面下方以了解他们的更多详细信息。

我以前使用过图像映射，并且我使用的网站具有多边形映射 (www.image-maps.com)，这将导致我单独概述这张照片中的每个人。我可以这样做，但是在 Photoshop 中这样做会更容易，并且有某种地图，当您将鼠标悬停在那个人上时，它会将图像替换为带有光晕的 photoshop 图像？

我已经尝试对此进行研究，并且遇到了很多不同的事情，但没有什么超级相似的。有一张美国地图基本上就是我想要它做的： http://stommepoes.nl/Menus/maphover.html http://www.outsharked.com/imagemapster/examples/usa.html

但我不知道如何进行定制，而不仅仅是一张美国地图。

任何建议都会很棒。只是不确定什么是节省时间和精力的最佳途径。

谢谢！

【问题讨论】：

我在许多项目中使用了 imagemapster（与美国地图非常不同），它工作得很好，它绝对是最好的（也是最简单的）API 之一。
@YannChabot 谢谢！ outsharked.com/imagemapster/default.aspx?demos.html#vegetables这个演示可能是我要走的路。
我的荣幸！说它是一个答案，并为您添加了一个很好的插件，让您更轻松地拥有自己的道路！

【解决方案1】：

我建议你这样做：

非常好的插件，那么你就得制作一个HTML地图区域。如果你有 Photoshop，我强烈推荐你这个插件。有了这两者，很容易在 photoshop 中创建路径，然后获取 HTML 地图的坐标

我用这些工具很快就创造了奇迹。

希望对您有所帮助！

【讨论】：

【解决方案2】：

您需要多少人的图像版本，每个版本都有一个人发光。然后用css transitions在图片之间淡入淡出，再用html map areas控制哪些区域调用对应的高亮图片。

【讨论】：

图片中有大约 130 人。我担心那时的加载时间。但这似乎是最简单的事情。
这是一个非常糟糕的主意，它会带你永远lol
好吧 130 已经很多了。这是程序员的答案，不是插件的答案：你可以创建一个比图像大得多的 png 蒙版，带有一点灰色和一点不透明度，然后在中间放一个小圆圈，透明，你得到这个想法。然后你只需要一个小脚本来定位你的面具，当用户将鼠标悬停在所选人物上的圆圈。没什么。