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

【问题标题】：How to customize background color of area from picture如何从图片中自定义区域的背景颜色
【发布时间】：2014-03-11 02:20:06
【问题描述】：

在我的网站上，我必须显示我国家的所有地区，我已经有我的国家的图片，因此每个地区的所有坐标。但是我想根据对 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

【问题讨论】：

标签： javascript php dictionary background

【解决方案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/

【讨论】：

您好，感谢您的回答。例如，我发送了一张图片，我使用的是我的国家（如美国）的图片，我必须为每个地区（如华盛顿、德克萨斯......）自定义背景。所以我不能使用桌子。 ;)
@VenderAeloth 你可能想看看谷歌地图或其他地图系统，并在其上绘制多边形developers.google.com/maps/documentation/javascript/… 这将比使用 GD 库更容易使用图像地图制作你自己的图像

【解决方案2】：

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

感谢您的帮助。

BR。

【讨论】：