javascript - JavaScript と HTML のイメージ マップ

Question

私は医師用の小さな Web アプリを作成しており、この画像の円をクリックできるようにしたいと考えています。ユーザーがクリックすると、色が変わるはずです。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");   
});