在图像上创建红色和绿色点

我在此处添加我的代码。我有一个名为points的表，其中包含字段id，名称和状态。值具有状态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上用餐，但只有点击它才能查看。它不显示颜色。我想在图像上看到绿色和红色的点我也想动态地生成坐标。有人意识到这一点，那么请帮助我。

来源

2017-03-05 user7441072

宽度和高度都应该在'px'不''％ – Varun

试试这个样本风格，你可以用它来调整位置。另外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>

来源

2017-03-05 13:00:18 Varun

在图像上创建红色和绿色点

回答

相关问题