jQuery는 ImageMapper를 사용하여 이미지를 대체합니다.

Question

Javascript, jQuery 및 ImageMapster 플러그인에 대한 이해를 높이려고합니다. 설명을 쉽게하기 위해 here's the jsFiddle에 대해 연구하고 있습니다.

jsFiddle 코드에서 각 비틀의 얼굴은 빨간색으로 둘러 쌓여 있습니다. 그러나 HTML에는 각 비틀의 숨겨진 이미지 (style="display:none")도 포함되어 있습니다. 사용자의 마우스가 해당 비틀즈의 얼굴 위로 이동하면 그룹 사진 위에 표시하고 싶습니다.

즉, 폴의 얼굴 위로 마우스를 움직이면 폴의 사진이 나타납니다. 폴에서 벗어나면 그룹 사진이 다시 나타납니다. Ringo의 얼굴을 넘을 때 Ringo가 클로즈업됩니다. 솔직하게 말해 그룹 사진이 사라지고 개별 사진이 나타나거나 인디 사진이 그룹 사진 위에 겹쳐져있는 경우 나에게 아무런 문제가되지 않습니다.

나는 gazillion 것들을 시도했지만 javascript는 저를 넘어 있습니다. 올바른 방향 (또는 직접 데모)으로 부드럽게 밀어 주시면 감사하겠습니다.

여기까지 읽는 분들은 ALL 데이터 키가 어떻게 작동하는지 이해할 수 없습니다 : all 캡션을 추가했지만 표시되지 않습니다. 마우스가 그룹 사진 위에있을 때 캡션 디스플레이를 만들려고했지만 특정 얼굴 (예 : 모든 얼굴이 흰색으로 강조 표시되어있을 때) 위에 표시하려고하지 않았습니다.

내 질문에 대한 답변은 this ImageMapper original demo.

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/은 - 당신이 더 나은 얻을 수 있도록해야한다 있도록 예제의 하중을가 이해.