title: How can I highlight only certain areas of an image?
body: <p>I've got an image of a human skeleton with approx 60 areas I want to highlight and make clickable. Those are in a circle and numbered from 1-60.</p>
  
  <p>The whole idea is I want to click on the nubmers (on the image) and highlight that part of the image. </p>
  
  <p>I've used JQuery to hover over the numbers/area and highlight (hover over with mouse) and when the user clicks on the number I'm getting the clicked number and processing on the server side code. (.NET C#)</p>
  
  <p>But I want the place where I click should remain the colour... Hovering over the number and changing the colour works fine... But I want when it's click the colour should change on the image / persisted...</p>
  
  <p>Below are the samples which changes the colour when you hover over with your mouse, but when you click the colour is not changing.</p>
  
  <p><a href="http://davidlynch.org/js/maphilight/docs/" rel="nofollow noreferrer">http://davidlynch.org/js/maphilight/docs/</a></p>
  
  <p><a href="http://davidlynch.org/js/maphilight/docs/demo_simple.html" rel="nofollow noreferrer">http://davidlynch.org/js/maphilight/docs/demo_simple.html</a></p>
  
  <p>any ideas how to highlight the some areas on the image?</p>
  
  <p><strong>sample code below:</strong></p>
  
  <pre><code> &lt;img class="map" src="Images/Figure_Human_Image1.png" alt="" usemap="#Skeleton17"  / &gt;
   &lt;map name="Skeleton17" &gt;
   &lt;area title="1" alt="1" href="#" shape="circle" coords="13,174,7" / &gt;
   &lt;area title="2" alt="2" href="#" shape="circle" coords="27,159,7" / &gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/lYiaZ.png" alt="How to PERMANENT highlight on the image"> </p>