画像に赤と緑のドットを作成

ここに自分のコードを追加します。私はフィールドID、名前、およびステータスを持つポイントという名前のテーブルを持っています。値はステータス1を持っている場合値は状態0と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.butだけonclickそれは見ることができますdinates。その色で表示されません。画像に緑と赤の点が表示されます。私は座標を動的に生成したいと思います。これを知っている人は誰でも、私を助けてください。

出典

2017-03-05 user7441072

50％であるべきです – Varun

位置を調整するために使用できるサンプルスタイルとして試してみてください。またborder-radiusが円形ではない100％の幅と高さの両方ではない ``％でpx` `でなければならない

.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

画像に赤と緑のドットを作成

答えて

関連する問題