Question

在我的网站上，我必须显示我所在国家的所有地区，我已经有了一张我国的照片，因此每个地区的所有协调都有。但是我想根据Region，IE：

的检查显示特定的背景

区域1返回"ok" => Region 1'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>

Empty image

Final image

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。

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

2 个答案: