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

在我的网站上，我必须显示我所在国家的所有地区，我已经有了我的国家的照片，因此每个地区都有所有的坐标。但我想根据上区检查，以显示特定的背景，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

来源

2014-02-12 Vender Aeloth

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

来源

2014-02-12 16:16:44 cmorrissey

你好，谢谢你的回答。例如，我发了一张照片，我正在使用我的国家的照片（如美国），我必须为每个地区（如华盛顿，德克萨斯州......）定制背景。所以我不能使用表格。 ;） –

@VenderAeloth你可能想看看谷歌地图或其他地图系统，并在其上绘制多边形https://developers.google.com/maps/documentation/javascript/shapes#polygon_add它会更容易，然后使用GD库用图像地图制作自己的图像 – cmorrissey

最后，我将使用SVG图像，转换SVG至PNG和我的网站上显示。

谢谢你的帮助。

BR。

来源

2014-02-13 15:34:54

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

回答

相关问题