title: define parts of an image and assign to hover,click events
body: <p>lets say we have an image of human body,
  i want when user hover over part of body (head,arm,etc), this organ turn green and when he clicks a defined action happens.</p>
  
  <p>is it doable using javascript ? if so what would be the concept ?</p>
  
  <p>reason for question :</p>
  
  <p><strong>Objective:</strong>
  this is all a small part of an existing project in which user inputs his medical history,
  so i want insteed of giving him a dropdown with all organs just show a model of human and he click and save his history of tramua etc..</p>
  
  <p>to do that i think i will need an image of human body and to define the boundaries in X-Y of each organ represented on this image and give it some properties(name). </p>
  
  <ol>
  <li>User hover : boundaries of organ shows and color of bg is green for example</li>
  <li>when user click it calls that object form.</li>
  </ol>
  
  <p>is there something similar existing in js-jquery ? or i need to invent the wheel ?</p>