2

On my website I have to display all Region of my country, I already have a picture of my country thus all coords for each Region. But I would like to display a specific background according to a check on Region, IE:

Region 1 returns "ok" => Region 1's background is green
Region 2 returns "critical" => Region2's background is red

HTML Example:

<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

2 Answers 2

0

You would be better off using an html table then an image. Here is some code to start you off.

<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/

2
  • Hello, thank you for your answer. I sent a picture for example, I'm using a picture of my country (like USA) and I have to customize background for each Region (like Washington, Texas...). So i can't use a table. ;) Feb 12, 2014 at 16:26
  • @VenderAeloth you may want to look at Google Maps or another mapping system, and draw polygons on it developers.google.com/maps/documentation/javascript/… it will be much easier then using the GD library to make your own images with image maps
    – cmorrissey
    Feb 12, 2014 at 16:54
0

Finally, I will use a svg picture, convert svg to png and display it on my web site.

Thank you for your help.

BR.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.