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

Question

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

区域1返回"ok" => Region 1's背景为绿色
区域2返回"critical" => Region2's区域2 "critical" => Region2's背景为红色

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>

空图片

最终影像

Answer 1

您最好使用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>

http://jsfiddle.net/7gPYE/

Answer 2

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

谢谢您的帮助。

BR。