2017-03-05 13 views
1

여기에 제 코드를 추가하고 있습니다. 필드 ID, 이름 및 상태와 함께 포인트라는 테이블이 있습니다. 값이 1의 상태가 있다면 값은 상태 0 및 1이미지에 빨간색과 녹색 점을 만듭니다.

  1. 이 후 녹색 점으로 표시
  2. 값이 상태가 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. 그것의 색상으로 표시되지 않습니다. 이미지에 녹색 점과 빨간색 점이 보이길 원합니다. 나는 역동적으로 좌표를 생성하고 싶습니다. 누구든지이 점을 알고 있으면 나를 도와주십시오.

+0

폭과 높이 모두없는 '%'로 px' '이어야 – Varun

답변

1

위치를 조정하는 데 사용할 수있는 샘플 스타일로 사용해보십시오. 또한 border-radius은 100 % 원 50 %이어야

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