title: onclick for each imagemap show individual div
body: <p>I have a code like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.maphilight.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function(){
          $('img[usemap]').maphilight();
  
          $('area').on('click', function(e){
              $a = $(this);
              e.preventDefault();
              $('area').each(function(){
                  var d = $(this).data('maphilight') || {};
                  if(d.alwaysOn == true){
                      d.alwaysOn = false;  
                  }
              });
              var data = $a.mouseout().data('maphilight') || {};
              data.alwaysOn = !data.alwaysOn;
              console.log(data);
              $a.data('maphilight', data).trigger('alwaysOn.maphilight');
          });
  
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;img src="karte.gif" width="464" height="320" border="0" usemap="#karte"&gt;
  
  &lt;map name="karte"&gt;
      &lt;area shape="poly" coords="141,73,140,25,156,24,161,17,165,13,171,12,173,20,170,42,205,63,201,75,193,85,184,90,168,82,157,76" href=""  rel="area1 - jajaja!"&gt;
      &lt;area shape="poly" coords="207,65,202,78,192,90,195,94,202,95,208,97,208,105,210,112,212,118,219,123,224,124,228,128,249,131,255,132,257,138,268,136,274,133,282,133,287,132,297,127,298,113,298,104,309,94,309,83,303,74,296,67,280,65,276,76,269,60,247,58,231,64,220,68,216,70" href="" rel="area2 - jajaja!"&gt;
      &lt;area shape="poly" coords="139,76,150,77,161,80,170,85,178,89,184,93,191,91,194,96,205,97,207,103,208,114,211,122,219,124,225,127,224,134,219,132,213,132,206,132,199,135,194,142,159,140,137,131,126,115,121,96,129,82" href="" rel="area3 - jajaja!"&gt;
      &lt;area shape="poly" coords="197,141,207,135,214,134,221,136,227,133,228,129,233,132,244,132,251,134,253,138,258,140,265,140,270,138,277,135,283,135,279,141,279,155,282,170,285,177,257,179,252,188,244,193,241,190,231,193,229,190,227,195,220,199,214,207,211,208,198,199,193,184,196,162,202,153" href="" rel="area4 - jajaja!"&gt;
      &lt;area shape="poly" coords="207,209,208,222,213,233,219,242,226,244,230,252,236,260,244,261,242,268,223,263,180,304,158,298,139,289,129,281,134,274,115,248,117,239,141,230,159,216,169,204,193,202" href="" rel="area5 - jajaja!"&gt;
      &lt;area shape="poly" coords="245,267,247,260,236,257,231,248,227,241,218,236,212,225,210,216,211,210,218,205,222,200,227,197,232,195,238,194,244,195,250,192,255,188,258,181,270,181,285,179,293,194,288,219,294,231,293,236,294,239,292,245,295,251,291,257,291,264,271,276" href=""  rel="area6 - jajaja!"&gt;
      &lt;area shape="poly" coords="293,261,297,252,294,244,296,237,297,228,290,219,295,197,314,194,339,214,335,231,338,244,327,255,313,251" href=""  rel="area6 - jajaja!"&gt;
  &lt;/map&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it works works ok. when i hover a imagemap the area get highlighted and when i click on a imagemap the highlight effect toggles.
  And now im searching for a solution to show a (individual) div by a click on a imagemap. For Example I click on the first imagemap and a div container appears with e.g a text about the first imagemap. then I click on the third imagemap and a div container appears with text about the third imagemap and the first div container disappears.</p>
  
  <p>pretty same like here: <a href="http://ncmarinescience.com/" rel="nofollow">http://ncmarinescience.com/</a> => click on a coloured point lets appear a div with some info about that point.</p>
  
  <p>thank you for help and greets from poland!</p>