jQuery use ImageMapper to substitute images

Question

I am trying to improve my understanding of Javascript, jQuery and the ImageMapster plugin. For ease of explanation, here's the jsFiddle I am working on.

In the jsFiddle code, each Beatle's face is bordered in red when hovered over. But the HTML also includes hidden images of each Beatle (style="display:none"), which I wish to appear over the group photo when the user's mouse moves over the corresponding Beatle's face.

That is, when I move mouse over Paul's face, the photo of Paul should appear. When move off Paul, the group photo reappears. When move overtop of Ringo's face, the close-up of Ringo will appear. Frankly, it doesn't matter to me if the group photo disappears and an individual photo appears, or if the indiv photo is superimposed over the group photo - I can't seem to make either one happen.

I've tried a gazillion things, but the javascript is beyond me. I would appreciate a gentle shove in the right direction (or a direct demo).

For those reading this far, I also don't understand how the ALL data-key works: I added an all caption, but it won't display. I was trying to make that caption display when the mouse was over the group photo, but not over any particular face (i.e. when all faces are highlighted in white).

My question is based on this original ImageMapper demo.

Answer 1

I've updated your fiddle: http://jsfiddle.net/qLakz/8/ - here's the code I added:

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

The jquery documentation page for .data() is here: http://api.jquery.com/data/ - it has loads of examples so it should help you get a better understanding.