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

检出笔：

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

使用CSS在图像上绘制圆圈

1 个答案: