создать красные и зеленые точки на изображении

Question

создать красные и зеленые точки на изображении

Я добавляю свой код здесь. У меня есть таблица с именем 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>

на самом деле я получаю координаты на изображение. но только по щелчку он может просматривать. его не отображается с цветом. я хочу видеть зеленые и красные точки на изображении
Я тоже хочу динамически генерировать координаты.
Кто-нибудь знает об этом, пожалуйста, помогите мне.

1

codeigniter css imagemap php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Попробуйте это как образец стиля, который вы можете использовать, чтобы отрегулировать положение.
Также 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>

1

Другие решения

Других решений пока нет …

Источник