How To Make Image Map <Area> Tag Have Background Color
<p>I am trying to make some of the areas green and some of the red for a map project I am working on. I can't figure out how to get an <code>id="100101"</code> to be a transparent green and <code>&lt;area  id="100102"</code>a transparent red. any help would be appreciated!! :-)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt; 

&lt;map name="floorplanfp"&gt;
&lt;area  id="100101" title="1" href="../carry.php?id=1001002" shape="rect" coords="52,3,239,187" style="outline:none;" target="_self"  data-maphilight='{"alwaysOn":true,"stroke":false,"fillColor":"efb1a6","fillOpacity":"0.3"}'/&gt;
&lt;area  id="100102" title="2" href="../carry.php?id=1002" shape="rect" coords="241,4,360,100" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100103" title="3" href="../carry.php?id=1003" shape="rect" coords="240,101,359,248" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100104" title="4" href="../carry.php?id=1004" shape="rect" coords="52,225,163,391" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100105" title="5" href="../carry.php?id=1005" shape="rect" coords="243,258,354,314" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100106" title="6" href="../carry.php?id=1006" shape="rect" coords="48,389,206,547" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100107" title="7" href="../carry.php?id=1007" shape="rect" coords="208,389,356,547" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100109" title="9" href="../carry.php?id=1009" shape="rect" coords="358,394,447,520" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100108" title="8" href="../carry.php?id=1008" shape="rect" coords="353,180,621,393" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100110" title="10" href="../carry.php?id=10010" shape="rect" coords="449,391,622,524" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100111" title="11" href="../carry.php?id=10011" shape="rect" coords="618,185,953,395" style="outline:none;" target="_self"     /&gt;
&lt;area  id="100112" title="12" href="../carry.php?id=10012" shape="rect" coords="617,390,954,551" style="outline:none;" target="_self"     /&gt;
&lt;/map&gt;
&lt;center&gt;
&lt;img src="../img/testfloorplan.jpg" width="1000" height="576" usemap="#floorplanfp"/&gt;
&lt;/center&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>