JQuery를 클릭하거나 <area> 위에 마우스를 올려 놓거나 올려 놓을 때 <map> 이미지 소스를 변경하려면 어떻게해야합니까?

Question

기본 map 및 area 태그를 사용하여 이미지 맵을 만들었습니다. 지도를 테스트 해본 결과 모든 영역이 정상적으로 작동하므로 HTML이 정확합니다.

이제 JQuery를 사용하여지도 (소스)의 이미지를 가져 오거나 가져올 때 다른 영역에 따라 변경하려고합니다. 이렇게하면지도의 다른 장소가 어떻게 연결되어 있는지를 보여주는 일종의 '대화식'지도를 얻기를 바랍니다.
내가 정의한 모든 영역에는 고유 한 ID가 있습니다.

이

$(document).ready(function() { 
    $('#area1').click(function() { 
     $('#londonmap').css('src', 'area1map.png'); 
    }); 
});​ 

#area 아이디 이름이 #londonmap 한 이미지의 ID 반면에 공중 선회되는 영역에 따라 변경 :

이

내가 클릭 버전을 사용하고있는 스크립트입니다 가리 키거나 클릭하는 영역에 따라 소스를 변경해야하는지도로 사용됩니다.

저는 JQuery 전문가가 아니기 때문에 제가 무엇을 잘못하고 있는지 물어볼 필요가 있습니다.

Answer 1

'src'는 CSS 속성이 아니지만 <img> 태그의 속성입니다.

$(document).ready(function() { 
    $('#area1').click(function() { 
     $('#londonmap').attr('src', 'area1map.png'); 
    }); 
});​ 

Answer 2

$.css() 방법으로 jQuery로 이미지 소스를 변경하려고합니다. 이미지 소스는 CSS로 설정되지 않지만 이미지 자체의 속성입니다. 이와 같이이 값을 수정하려면 $.attr()을 사용해야합니다.