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