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.

Joe · Accepted Answer · 2013-04-22T17:14:56.293

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.

edited Apr 22 '13 at 17:14

answered Apr 22 '13 at 16:54

Joe

15,205
8
49
56

Thanks. I had thought that if I could figure out how to make an indiv photo appear, then hiding the group photo would be obvious. It isn't. Adding `$('#beatlesIMG').hide()` within either function doesn't do what I thought it would. Is the `$('area').hover(...) fn the correct place to be show/hiding #beatlesIMG ? – cssyphus Apr 22 '13 at 17:18
1

Honestly, I don't think that fading out the main image would really work. You can try it by adding `$('#mapster_wrap_0').hide();` to the first hover function and `$('#mapster_wrap_0').show();` to the second. It causes some odd behaviour because when it's hidden it triggers the 'mouseout' event. It then fades images and associated text in and out very quickly. A better way of doing it would be to have the images and text display alongside the main image. – Joe Apr 22 '13 at 17:28

jQuery use ImageMapper to substitute images

1 Answers1