php - 在图像上创建红色和绿色的点

我在这里添加我的代码。我有一个名为点的表，其字段为id，name和status。
值的状态为0和1

如果值的状态为1，则将其显示为绿点
如果值的状态为0，则将其显示为红点

我在图像图中尝试过
我也想在鼠标悬停时显示值的名称
这是我的代码：

    <html>



    <map name="map1" id="_map1">
        <?php
foreach ($points as $point)
{
    $name=$point->name;
    $status=$point->status;
 if($status==1){ ?>
        <area shape="rect" coords="10,15,18,20"  href="<?php echo base_url()?>assets/images/green.jpg"   alt="" title="" onmouseover="<?php echo $name; ?>" />
        <?php } else if($status==0) {?>
        <area shape="rect"  coords="0,0,50,50" href="<?php echo base_url()?>assets/images/red.jpg"   alt="" title="" onmouseover="<?php echo $name; ?>"/>
<?php } }?>
                        </map>
         <img id="map1" src="<?php echo base_url()?>assets/images/rectangle.png" usemap="#map1" border="0" width="800" height="600" alt="" />


</html>

实际上是在image上获得坐标。但是只有onclick才能查看。它不显示颜色。我想在图像上看到绿色和红色的点
我也想动态生成坐标。
任何人都知道这一点，那么请帮助我。

最佳答案

尝试使用此示例样式来调整位置。
同样，对于一个圆圈，border-radius应该为50％，而不是100％

.circle_green {

      padding: 10px 11px;
      background: green;
      height: 2px;
      border-radius: 50%;
      margin-left: auto;
      margin-right: auto;
      width: 2px;
    }

  <div class="circle_green">
      </div>

关于php - 在图像上创建红色和绿色的点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42608597/