html - 使用 CSS 在图像上绘制圆圈

Question

是否可以使用 CSS 在图像上绘制圆圈？

我有区域 1、区域 2、区域 3 和区域 4 的链接图像。 Zones我在 salesforce 中有一个表单，在多选选择列表中包含这些值。如果选择了任何区域，则会圈出适当的区域。以下是所选区域 1、2 和 4 的示例。 Zone 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="/image/paJw2.png" />
</div>

检查笔:

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