jQuery использует ImageMapper для замены изображений

Question

Я пытаюсь улучшить мое понимание Javascript, jQuery и плагина ImageMapster. Для простоты объяснения вот jsFiddle, над которым я работаю.

В коде jsFiddle лицо каждого Битла окаймлено красным, когда оно находится над ним. Но HTML также включает в себя скрытые изображения каждого битла (style="display:none"), который я хочу отобразить на групповой фотографии, когда мышь пользователя перемещается над соответствующим лицом Битла.

То есть, когда я наводю мышь на лицо Пола, должна появиться фотография Пола. Когда отъезжают от Пола, снова появляется групповое фото. Если переместиться поверх лица Ринго, появится крупный план Ринго. Честно говоря, для меня не имеет значения, исчезнет ли групповая фотография и появится ли отдельная фотография, или если отдельная фотография будет наложена на групповую фотографию - я не могу заставить ни одну из них произойти.

Я пробовал несколько штук, но javascript выше меня. Я был бы признателен за мягкий толчок в правильном направлении (или прямую демонстрацию).

Для тех, кто читает это далеко, я также не понимаю, как работает ключ данных ALL: я добавил all подпись, но она не будет отображаться. Я пытался сделать так, чтобы заголовок отображался, когда указатель мыши был над групповой фотографией, но не над каким-либо конкретным лицом (т.е. когда все лица выделены белым цветом).

Мой вопрос основан на этой оригинальной демоверсии ImageMapper.

Answer 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/ - у него есть множество примеров, так что это должно помочь вам лучше понять.