자바 스크립트 및 HTML 이미지 맵

Question

내 의사에게 작은 웹 앱을 만들고 있는데이 이미지의 서클을 클릭 할 수있게하고 싶습니다. 사용자가 하나를 클릭하면 색상이 변경됩니다. Jquery와 HTML 이미지 맵을 사용하여이 작업을 수행 할 것이라고 생각했지만 다른 사람에게이 작업을 수행하는 방법에 대한 아이디어가 있는지 알고 싶었습니다.

감사합니다. 당신은 원없이 동일하게 배경 이미지를 교체해야 http://jsfiddle.net/riateche/NTkmV/

:

Answer 1

내 구현을 참조하십시오. 원의 좌표 (및 선택적 반경)가있는 circles 배열을 채워야합니다. 4 개의 서클 만 추가했습니다.

HTML :

<div id="container"> 
    <img src="http://i.stack.imgur.com/cQdo2.png"> 
</div> 

CSS :

#container { position: relative; } 
.circle { 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    border: 3px solid green; 
    border-radius: 100%; 
} 

.circle.on { 
    border-color: red; 
} 

자바 스크립트 : 그래서

var circles = [ 
    //each item contains x, y and optional size 
    [93, 81, 18], 
    [44, 173, 18], 
    [108, 69], 
    [134, 77] 
]; 

$(circles).each(function() { 
    console.log("ok"); 
    var obj = $("<div/>"); 
    obj.addClass("circle"); 
    obj.css("left", this[0]);  
    obj.css("top", this[1]); 
    if (this[2]) { 
    obj.width(this[2]); 
    obj.height(this[2]); 
    } 
    $("#container").append(obj); 
}); 

$(document).on("click", ".circle", function(e) { 
$(e.target).toggleClass("on"); 
});