Question

我在这里添加我的代码。我有一个名为points的表，其中包含字段ID，名称和状态。值的状态为0和1

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

我在图像地图中尝试过它我想在mouseover上显示值的名称这是我的代码：

    <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>

实际上我正在对图像进行协调。但只有onclick它才能查看。它没有显示颜色。我希望在图像上看到绿色和红色的点我也想动态生成坐标。任何人都知道这一点，请帮助我。

Answer 1

尝试将此作为可用于调整位置的样本样式。对于一个不是100％的圈子，border-radius也应为50％

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: