是否可以使用 CSS 在图像上绘制圆圈?
我有区域 1、区域 2、区域 3 和区域 4 的链接图像。 Zones 我在 salesforce 中有一个表单,在多选选择列表中包含这些值。 如果选择了任何区域,则会圈出适当的区域。 以下是所选区域 1、2 和 4 的示例。 Zone 1, 2 & 4
目前我有 16 张不同的图像,每个可能的圆圈区域组合,并使用 visualforce 来拉出正确的图像。基于输入。
我刚刚被要求向该图像添加第 5 个区域,这将使我在 25 个图像中进行所有可能的区域选择,并且在我的可视页面中有一个非常长的条件语句。
我是否可以使用 CSS 或 HTML 在一张图片上绘制圆圈,而不是为每种可能的区域组合使用不同的图片?
非常感谢您的帮助。
最佳答案
这里有一些代码可以做到这一点:
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>
检查笔:
关于html - 使用 CSS 在图像上绘制圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52283860/