鼠标悬停在不同位置的Javascript/CSS/PHP鼠标悬停框

我试图用鼠标盖在图像上显示不同的位置。所以基本上我有一个图像，当你把鼠标悬停在附近的链接上时，一个鼠标悬停框会出现在图像上CSS中指定的位置。然而，我试图让它发生在多个链接中，而不为每个CSS框创建代码

我有大约50个链接，当我把鼠标悬停在其中一个链接上时，我希望能够从db或文本文件中获取它应该在图像上创建悬停的位置。我最初的想法是使用PHP帮助从文件中提取信息，将其放入数组，然后动态更新CSS。如果用户只需单击链接，这似乎是可行的，因为我可以告诉CSS在数组中查找位置的位置。如果可能的话，我不确定如何才能让鼠标套起作用

CSS代码目前非常基本，如下所示。

#框{
位置：绝对位置；
顶部：100px；
左：200px；
背景色：#ffffff；}

如果有什么不合理或我只是忘记了什么，请告诉我

---

谢谢大家!

好的，那么您要做的就是称为CSS精灵。以下是您想要的（我的示例与您的代码正交，但教授了原理）：

你可以从这里看到方向（而且你不需要使用

.link#one

。我只是出于示例目的使用它。你可以使用

#one

，甚至一个类

.one

）

通过练习，您很快就会了解它的工作原理。以下是一些示例HTML：

<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>

1
二

---

把所有这些放在一起，让你的图像成为一个100px高，50px宽的.png文件，每个链接有50px x 50px。

这个功能和facebook图像标记一样吗？比如，链接和图像是分开的吗，然后当用户在链接上鼠标悬停时，图像上会出现一些东西？我猜是这样的。而不是用鼠标悬停在人的周围有一个巨大的盒子，我想要一个文本框或者一个箭头一样的图像，指向地图上的某个点。例如，假设你有一张你居住的城市的地图，有各种各样的POI，很多POI紧挨着彼此（比如商店或者你有什么）。我正在寻找一种方法，这样我可以将鼠标悬停在一个链接上，并在地图上显示一个指向该POI的箭头。该地图只是一个基本的500x500图像，但彼此之间可以有很多POI。我喜欢这个想法，但我认为它不完全是我想要的或理解的，所以请告诉我。我从来没有听说过CSS精灵，所以我可以这里有点不对劲。我要做一个位置标记（在精灵文件中）然后用背景位置移动它，或者我是在复制我的500x500地图，那是我的精灵地图，我只是在翻滚时显示我想要的50x50瓷砖？@比利，对不起，我没有很好地阅读这个问题。我不确定我是否100%理解这个问题，但再看一眼，它可能是你想要的旋转器。比如，你有框a、链接a、链接b和链接c。当用户悬停链接a时，框a的背景/或图像发生变化，当悬停链接b时，相同但不同，依此类推。如果这是您想要的，您可能需要修改其中一个旋转器脚本。（您需要JavaScript来完成此操作，而不需要完全破解）是的，这个问题很难解释，但是我哥哥给我打了一个叫醒电话，让我大吃一惊。我在寻找CSS图像映射。所以我所做的就是解析大量数据，然后动态生成图像映射。显示我需要的信息。Thx虽然对于这些想法，我实际上喜欢旋转器和精灵的想法，并且可能会在某些方面使用它们（其他：）

<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>