0

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

在 jsFiddle 代码中，每个披头士乐队的脸在悬停时都带有红色边框。但是 HTML 还包含每个披头士乐队 ( style="display:none") 的隐藏图像，当用户的鼠标移到相应披头士乐队的脸上时，我希望这些图像出现在合影上。

也就是说，当我将鼠标移到 Paul 的脸上时，应该会出现 Paul 的照片。离开保罗时，合影再次出现。越过林戈的脸，就会出现林戈的特写。坦率地说，如果合影消失而出现单张照片，或者个人照片是否叠加在合影上，对我来说并不重要——我似乎无法做到这两者。

我已经尝试了无数的东西，但是 javascript 超出了我的范围。我会很感激朝着正确的方向轻轻推动（或直接演示）。

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

我的问题是基于这个原始的 ImageMapper 演示。

4

1 回答 1

1

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

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

jquery 文档页面在.data()这里：http ://api.jquery.com/data/ - 它有大量示例，因此它应该可以帮助您更好地理解。

于 2013-04-22T16:54:28.787 回答