Draw circles on image with CSS

Question

Is it possible to use CSS to draw circles on top of an image?

I have the linked image with zone 1, zone 2, zone 3, and zone 4. Zones I have a form in salesforce with these values in a multiselect pick list. If any of the Zones are selected, the proper zones would be circled. Here is an example of zone 1, 2, and 4 selected. Zone 1, 2 & 4

Currently I have 16 different images, with every possible combination of circled zones, and using visualforce to pull the right image. Based on the input.

I was just asked to add a 5th zone to this image, which would put me at 25 images to do all possible Zone selections, and a very long conditional statement in my visual page.

Is there anyway I can use CSS or HTML to draw the circles on one image, instead of having different images for each possible combination of zones?

Thank you very much for any help.

Answer 1

Here's some code that will do this:

function drawZones(zoneList) {
  var container = document.getElementById('zone-image-container');

  //  Remove existing circles.
  for (var i = container.children.length - 1; i > 0; i--) {
    container.removeChild(container.children[i]);
  }

  //  Add circles.
  for (var i = 0; i < zoneList.length; i++) {
    var zone = document.createElement('div');
    zone.className = 'zone-circle zone-' + zoneList[i];
    container.appendChild(zone);
  }
}

drawZones([1, 2, 4]);

#zone-image-container {
  /* Cause the absolutely positioned circles to be relative to the container */
  position: relative;
}


/* The image must have a fixed size for the size and positions of the */


/* circles to be consistantly correct */

img {
  width: 400px;
}

.zone-circle {
  position: absolute;
  width: 80px;
  height: 40px;
  border-radius: 40px;
  border: 5px solid red;
  left: 160px;
}


/* Custom Y position for each zone. */

.zone-4 {
  top: 30px;
}

.zone-3 {
  top: 100px;
}

.zone-2 {
  top: 170px;
}

.zone-1 {
  top: 240px;
}

<div id="zone-image-container">
  <img src="https://i.sstatic.net/paJw2.png" />
</div>

Check out the pen:

https://codepen.io/anon/pen/zJWWYb