Map an image with colors [closed]

I have a vector with several values, each vector position can range from 0 to 100:

vet = a [10 , 50 , 60 , 70 , 50 , 0 , 99 , 65 , 32 ];

These values are the pressures in the sole of the foot of an individual. So I need to color this image at some points. Each position of the vector refers to a pressure point, an area to be colored.

values smaller than 33 need to color green, values between 33 and 66 blue and values greater than 66 red. As can be seen in the following image.

Myattemptwastomaptheimageandputthecolorsaccordingtothevalueofthevector,howeverthismappingisonlyalinktoanotherpage.

<imgsrc="oe.jpg" width="145" height="126" alt="Sola do pe" usemap="#pe">
    <map name="pe">
      <area shape="rect" coords="0,0,82,126" href="area1.htm" alt="area1">
      <area shape="rect" coords="90,58,3" href="area3.htm" alt="area2">
      <area shape="rect" coords="124,58,8" href="area3.htm" alt="area3">
    </map>

In my case I do not need to link any page just to color each region.

Would you have any idea how to do this?