在图像上创建红点和绿点答案

【问题标题】：create red and green dots on image在图像上创建红点和绿点
【发布时间】：2017-07-25 07:37:33
【问题描述】：

我在这里添加我的代码。我有一个名为 points 的表，其中包含字段 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>

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

【问题讨论】：

宽度和高度都应该在px而不是%

标签： php css codeigniter imagemap

【解决方案1】：

试试这个作为你可以用来调整位置的示例样式。同样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>

【讨论】：