Question

我正在努力提高对Javascript，jQuery和ImageMapster插件的理解。为了便于解释，here's the jsFiddle我正在努力。

在jsFiddle代码中，每个披头士的脸在悬停时都是红色的。但HTML还包括每个披头士（style="display:none"）的隐藏图像，当用户的鼠标移动到相应的披头士脸上时，我希望它出现在群组照片上。

也就是说，当我将鼠标移到保罗的脸上时，保罗的照片应该出现。离开保罗后，合影再次出现。当移动到Ringo脸部的上方时，会出现Ringo的特写镜头。坦率地说，如果团体照片消失并且出现单张照片，或者如果个人照片叠加在团体照片上，那对我来说无关紧要 - 我似乎无法让任何一张照片发生。

我尝试了很多东西，但javascript超出了我的范围。我希望在正确的方向（或直接演示）轻轻推动。

对于那些阅读目前为止的人，我也不明白ALL数据键是如何工作的：我添加了一个all标题，但它不会显示。我试图在鼠标悬停在群组照片上时显示该标题，但不是在任何特定脸部上方（即当所有脸部都以白色突出显示时）。

我的问题基于this原始ImageMapper演示。

Answer 1

我已经更新了你的小提琴：http://jsfiddle.net/qLakz/8/ - 这是我添加的代码：

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

.data()的jquery文档页面位于：http://api.jquery.com/data/ - 它包含大量示例，因此它可以帮助您更好地理解。

jQuery使用ImageMapper来替换图像

1 个答案: