将鼠标悬停在堆叠的多个透明图像上答案

【问题标题】：Mouse Over multiple transparent images stacked将鼠标悬停在堆叠的多个透明图像上
【发布时间】：2012-08-06 19:53:40
【问题描述】：

我不确定这是否可能，但我正在尝试创建一种效果，当您将鼠标悬停在图像上时，会创建多个相互重叠的图像（图像将设置为一些不透明度），我将图像的该部分显示得比其他部分更清晰。

很难解释，但这里有几个例子

这张图片：

是所有那些重叠的图像的创建（每个图像都在前一个之上）

当我将鼠标悬停在最终图像上时，我希望能够“突出显示”与图像本身中图像的该部分相对应的图像部分

我想做的事情是只显示设置不透明的主图像，当用户将鼠标悬停在它上面时，抓取坐标，检查所有图像（不能超过 25 个）看看这些坐标是否是与非“透明”像素匹配并在主要顶部显示此类图像以提供“突出显示”效果，但最终图像约为 400x200 并在显示页面时动态创建所有像素的数组是不现实的对于每小时/分钟有数千次点击的服务器。将此数组保存在数据库中是不现实的，并且图像的大小可能会根据页面而变化，我们目前有 130 万张最终图像，每张平均大约 10 个分解图像

【问题讨论】：

您是希望动态地为每个页面访问者提供新图像，还是希望创建每个可能的组合并在他们将鼠标悬停时选择正确的组合？第一个选项 = 不是一个好主意，第二个选项 = 与 PHP 无关。我建议删除该标签。
第一个选项是我现在拥有的。每个访问者在他们的帐户中设置了不同的图像，他们可以打开图像并预览最终图像以及各个“部分”。要更改部分，他们必须单击特定部分。我想要的是最终用户单击他们想要更改的主图像部分，并且当他们将鼠标悬停时有这样的部分“突出显示”

标签： php javascript html transparency

【解决方案1】：

一种可能的解决方案是为每个子图像创建自定义 SVG 叠加层。在发生onmouseover 事件时，您将降低 SVG 元素的不透明度，使下面的图像更加可见。

Checkout this 用于创建 SVG 的工具。

【讨论】：

这是个好主意。您是否认为也可以更改这些元素的“颜色”？您会看到每个图像都是根据某些用户值动态创建的。你会用什么将各种图像转换成一个 SVG，然后为鼠标悬停添加 JS 代码？
我需要动态创建 SVG，我知道有很多工具可以创建 SVG，以及将 JPG 转换为矢量的工具。
不确定动态创建 SVG。不过，你绝对可以改变它们的颜色。

【解决方案2】：

$("img").css("opacity","0.8");

$("img").mouseover(function()
{
    $(this).css("opacity","1.0");
});

$("img").mouseout(function()
{
    $(this).css("opacity","0.8");
});

对于分割图像的效果，尝试使用图像映射：

http://www.javascriptkit.com/howto/imagemap.shtml

支持图像贴图的不透明度：

http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/

编辑：

要实现悬停效果，请尝试使用 Fabric JS 将它们加载到画布中，这是一个演示：

http://fabricjs.com/hovering/

【讨论】：

是的，这就是你做不透明度的方式。谢谢你。我的问题是你如何识别图像中光标所在的位置。图像的大小都相同，它们只是将一些 pizel 设置为透明。 JS 不关心像素的样子，如果你将鼠标悬停在它上面只会抓取顶部的图像（我打算使用与背景图像重叠的 DIV）
@Fabrizio 已编辑。图片地图兼容旧浏览器 BTW
我知道，但是如何在给定 JPG（或 PNG 或 GIF）的情况下动态创建地图？
@Fabrizio 我编辑了。您可以将图像加载到画布中，但这不支持旧浏览器。任何支持旧浏览器的东西都会涉及到 Javascript 中的图像处理，这不会很有趣。
但同样，这是当时的一张图片，当我将鼠标悬停在另一张图片上方的透明区域上时，它会抓取顶部的一张。我正在考虑是否应该只创建具有范围和近似值的像素图，并希望它不会导致加载时出现太多延迟。如果我能实现它会发布我的代码

【解决方案3】：

放弃该项目，唯一的解决方案是 SVG，但现阶段不可能，因为某些浏览器/操作系统不完全支持它们

【讨论】：