I want to show status with 0 area as red dot and status with 1 area are green. I used style tag for area. But not color coming on image area. Anybody knows please help me. I am sharing my code below
<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>
See the example use of <map> Html map tag
The href attribute does not show the image (red or green). It is a hyperlink to the target image. The image displays on the screen is the src file of the <img> tag.
You may need to generate the image dynamically on the server side, or use <canvas> to render the data on the client side.