How to change colour of shape in area tag?

HTML & CSS
1

Hello,

I’m working on Image map. I’m trying to change the background color of shape in area tag, I’m not able to change.

<?php

$data = array(array("landmark",5,5,11,11,29,29,31,31),array("radio",'2.4','5','2.4','5','2.4','5','2.4','5')) ;

$file = fopen("csv/map","r");
$chk=0;
$x1chk=0;
$x2chk=0;
$y1chk=0;
$y2chk=0;
while(!feof($file)){
	$content = fgetcsv($file);
	$count1 = count($content);

for($i=0;$i<$count1;$i++)
{
if($i==0)
{
$x1[$x1chk]=$content[$i];
$x1chk++;
}

if($i==1)
{
$y1[$y1chk]=$content[$i];
$y1chk++;
}

if($i==2)
{
$x2[$x2chk]=$content[$i];
$x2chk++;
}

if($i==3)
{
$y2[$y2chk]=$content[$i];
$y2chk++;
} }
$chk++;
}
 
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>

<body style ="margin: 0,width = 780px;">
<p> rectangle coordinates :(x1,y1)(x2,y2)</p>

<img class="#map" src = "image/<?php echo map ?>" alt="map" usemap="#map"/>
<map name = "map">
<?php 

$Yaxis = count($data);
for($i=1;$i<=$chk;$i++)
{
	for($j=0;$j<$Yaxis;$j++)
	{
		$k = $j+1;
		if($data[$j]['landmark']==$i)
		{ 
	    if($data[$k]['landmark']==$data[$j]['landmark']){
		echo "<area id = $i class = 'map' shape = 'rect' coords = '".$x1[$i-1].",".$y1[$i-1].",".$x2[$i-1].",".$y2[$i-1]."' alt = '".$i."' href'#'/>";
	}
		}	}   }
?>
</map>
</html>
2

Hi,

Unfortunately you cannot change the background of the area element as it has no styling capabilities. It just provides a click area for the image only.

You will need a plugin or maybe svg. If its simple rectangular areas you could overlay css elements in squares to get the background color changes but I doubt that would be the case for anything but the simplest example.

As an aside when posting in the css/html forum we would need css and html and not php. PHP should only be included if its a php question :). We just need the final output to work with here (view source from the browser).

3

Thanks Paul,

I’ll check about plugin and svg and will keep in mind and post php questions in php forum only.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.