JavaScript和HTML圖像地圖

Question

我正在爲我的醫生製作一個小型網絡應用程序，並且希望讓此圖像的圈子可點擊。當用戶點擊一個時，它應該改變顏色。我以爲我會用Jquery和HTML圖像地圖來做到這一點，但我想知道是否有其他人對如何做到這一點有了一些想法？

謝謝！

Answer 1

見我的實現：http://jsfiddle.net/riateche/NTkmV/

此時應更換背景圖片相同的無界。您應該填充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; 
} 

的JavaScript：

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"); 
});