title: changing fillColor of an area on click using Jquery maphilight plugin
body: <p>I am using JQuery maphilight plugin to highlight the areas in the world map. Right now I have set the following default options for the area elements</p>
  
  <pre><code>fillColor: 'F25607' //orange color
  alwaysOn:  'true'
  </code></pre>
  
  <p>So that on pageload the area elements are colored with orange. I have an onclick event for each of the area elements.
  I need to change the highlight color (i.e. the fillColor) of the clicked area element in the map to a different color like green
  when I click another element in the map that element should change to green and the previous selected element should change back to orange.
  Here is sample code of my map</p>
  
  <pre><code>&lt;img id="theImg" class="map" src="/gra/images/worldblank.png" usemap="#worldmap" /&gt;
  &lt;map id="worldmap" name="worldmap"&gt;
        &lt;area class='area' shape="circle" alt="Israel" title="Israel" coords="423,232,7" href="#" onclick="loadActivity('Israel');" /&gt;
        &lt;area class='area' shape="circle" alt="China" title="China" coords="548,229,5" href="#" onclick="loadActivity('China');"  /&gt;
  &lt;/map&gt;   
  </code></pre>
  
  <p>the sample js function to be completed would be :</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function(){
          jQuery('.map').maphilight();
      });
  
  $(function() {
    $('.area').click(function(e) {
  e.preventDefault(); // from the samples, i guess used to overrride default options
  // get the clicked area element and set its fillColor to green 
  // make the previous selected area fillColor to the default options value  (if we need to do this)
  // use the trigger function to trigger this change
      });
   });
  &lt;/script&gt;
  </code></pre>