JavaScript和HTML图像映射

Question

我正在为我的医生制作一个小型Web应用程序，并希望使这个图片中的圆形可点击。当用户单击其中一个时，它应该改变颜色。我想使用Jquery和HTML图像映射来实现这一点，但我想知道是否有其他人有某种想法可以使这成为可能？

谢谢！

- Andrew

---

那么您是在寻找HTML图像映射的替代方案，还是想知道如何使用HTML图像映射？ - jfrej

另一种选择是使用SVG绘制，这样您可以在任何形状上添加样式（包括悬停时）和链接。 - Denys Séguret

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

- Pavel Strakhov

---

哇，那个完美地运行了！你用什么方法找到圆上的坐标？ - Andrew

我使用了GIMP来获取光标下点的坐标。您可以使用此工具或任何其他图形编辑器。 - Pavel Strakhov