Question

I am making a small web app for my doctor and would like to make this image’s circles clickable. When they user clicks on one it should change color. I thought I would do this with Jquery and an HTML image map but I wanted to know if anyone else had some sort of idea on how to make this happen?

Thank you!

Answer 1

See my implementation: http://jsfiddle.net/riateche/NTkmV/

You should replace background image to the same without circles. You should fill circles array with coordinates (and optional radiuses) of circles. I’ve added only 4 circles.

HTML:

<div id="container">
    <img src="https://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");   
});