Javascript jQuery使用ImageMapper替换图像

我正在努力提高对Javascript、jQuery和ImageMapster插件的理解。为了便于解释，我正在研究

在JSFIDLE代码中，当鼠标悬停在上面时，每个披头士的脸都用红色边框。但是HTML还包括每个披头士乐队的隐藏图像（

style=“display:none”

），我希望当用户的鼠标移动到对应的披头士乐队的脸上时，这些图像会出现在集体照片上

也就是说，当我将鼠标移到保罗的脸上时，应该会出现保罗的照片。离开保罗时，合影再次出现。当移动到Ringo脸部上方时，Ringo的特写就会出现。坦白地说，如果集体照消失，个人照出现，或者独立照叠加在集体照上，对我来说都无关紧要——我似乎无法做到这两种情况

我已经尝试了无数的东西，但是javascript是我无法理解的。我会很感激在正确的方向轻轻推（或直接演示）

对于那些阅读到目前为止的读者，我也不明白ALL data键是如何工作的：我添加了一个

ALL

标题，但它不会显示。当鼠标放在集体照片上时，我试图显示标题，但没有放在任何特定的脸上（即当所有的脸都以白色突出显示时）

我的问题基于最初的ImageMapper演示。

我已经更新了你的小提琴：-以下是我添加的代码：

var currentPerson;
$('area').hover(
    function(){
        currentPerson = $('#just-'+$(this).data('name'));
        currentPerson.fadeIn();
    }, function(){
        currentPerson.hide();
    }
);

---

.data（）

的jquery文档页面在这里：-它有大量的示例，因此应该可以帮助您更好地理解。

谢谢。我曾想，如果我能想出如何使一张独立照片出现，那么隐藏集体照片将是显而易见的。事实并非如此。在这两个函数中添加

$（'#beatlesIMG'）.hide（）

，并不像我想象的那样。“$（'area'）。悬停（…）fn是正确的显示/隐藏位置吗#披头士img？老实说，我不认为淡出主图像会真正起作用。您可以通过添加

$（'#mapster_wrap_0'）来尝试

到第一个悬停函数和

$（'mapster_wrap_0'）。show（）到第二个。它会导致一些奇怪的行为，因为当它被隐藏时会触发“mouseout”事件。然后快速淡入淡出图像和相关文本。一个更好的方法是在主图像旁边显示图像和文本。非常感谢您的帮助和想法。