Javascript 如何从图片中自定义区域的背景色

在我的网站上，我必须显示我的国家的所有地区，我已经有了我的国家的图片，因此每个地区的所有坐标。但我想根据区域检查显示特定背景，即：

区域1返回

“ok”=>区域1的背景为绿色

区域2返回
“critical”=>区域2的背景为红色

HTML示例：

<img src="ai13400_original.png" usemap="#ai13400" width="647" height="436" alt="click map" border="0" />
<map id="ai13400" name="ai13400">
<!-- Region 1 -->
<area shape="rect" alt="top" title="top" coords="136,39,288,189" href="#" target="_blank" />
<!-- Region 2 -->
<area shape="rect" alt="topr" title="topr" coords="286,40,464,188" href="#" target="_blank" />
<!-- Region 3 -->
<area shape="rect" alt="bottom" title="bottom" coords="136,190,286,339" href="#" target="_blank" />
<!-- Region 4 -->
<area shape="rect" alt="bottomr" title="bottomr" coords="286,188,464,339" href="#" target="_blank" />
<area shape="default" nohref alt="" />
</map>





使用html表格比使用图像更好。这里有一些代码可以让你开始

<table>
    <tr>
         <td style="background: green;">Region 1<td>
         <td style="background: red;">Region 2<td>
    <tr>
    <tr>
         <td style="background: green;">Region 3<td>
         <td style="background: green;">Region 4<td>
    <tr>
</table>


区域1
区域2
区域3
区域4

最后，我将使用svg图片，将svg转换为png并显示在我的网站上

谢谢你的帮助

BR.
您好，谢谢您的回答。例如，我发送了一张图片，我正在使用我的国家（如美国）的图片，我必须为每个地区（如华盛顿、德克萨斯…）定制背景。所以我不能用桌子@VenderAlloth您可能希望查看Google地图或其他地图系统，并在其上绘制多边形。这将比使用GD库使用图像地图制作您自己的图像容易得多