Нарисуйте круги на изображении с помощью CSS

Question

Можно ли использовать CSS для рисования кругов поверх изображения?

У меня есть связанное изображение с зоной 1, зоной 2, зоной 3 и зоной 4. Зоны У меня есть форма в Salesforce с этими значениями в списке выбора множественного выбора.Если выбрана какая-либо из зон, соответствующие зоны будут обведены.Вот пример выбранной зоны 1, 2 и 4. Зона 1, 2 и 4

В настоящее время у меня есть 16 различных изображений, с каждой возможной комбинацией обведенных зон, и использую visualforce для вытягивания правильного изображения.На основании ввода.

Меня только что попросили добавить 5-ю зону к этому изображению, что даст мне 25 изображений, чтобы сделать все возможные выборки зон, и очень длинное условное выражение на моей визуальной странице.

Можно ли в любом случае использовать CSS или HTML для рисования кругов на одном изображении, вместо того, чтобы иметь разные изображения для каждой возможной комбинации зон?

Большое спасибо за любую помощь.

Answer 1

Вот код, который сделает это:

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.stack.imgur.com/paJw2.png" />
</div>

Проверьте ручку:

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