jQuery highlighting poly

by chrisloughnane

HTML

<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
  <h1>jQuery Map Highlight Example</h1>
  
  <img src="http://trazoo.ie/images/interface/ireland_map.jpg" width="320" height="400" class="map" usemap="#Map" />
  
<map name="Map" id="Map">
<area shape="poly" href="#" title="Co. Dublin" alt="Dublin"         coords="275,175,278,179,282,181,284,186,282,190,281,195,285,199,285,202,277,201,277,205,282,211,283,217,269,219,263,216,256,214,258,207,257,201,265,195,267,190,262,184,265,180,269,182,271,178" />

<area shape="poly" href="#" title="Co. Wicklow" alt="Wicklow"         coords="282,217,285,223,287,232,287,238,290,242,289,246,287,250,286,254,283,256,281,263,274,262,268,263,264,269,259,273,254,270,252,265,249,262,251,259,254,259,259,257,259,252,253,250,248,248,244,247,242,242,244,237,247,234,252,230,251,225,257,219,260,215,265,217,269,220" />

<area shape="poly" href="#" title="Co. Wexford" alt="Wexford"         coords="280,262,284,267,281,270,278,274,279,280,279,286,275,293,271,299,270,306,265,305,265,308,270,313,273,318,270,323,264,321,258,323,250,320,244,320,240,318,240,324,235,328,235,320,231,316,230,309,232,302,235,296,240,292,245,285,246,278,252,277,253,272,255,270,258,273,263,268,268,262,273,261" />

<area shape="poly" href="#" title="Co. Waterford" alt="Waterford"     coords="230,314,221,315,215,315,211,311,201,307,191,306,182,308,180,312,183,318,178,320,171,318,167,317,167,321,161,321,157,325,172,343,176,345,177,347,182,348,185,344,190,343,193,341,196,337,196,333,208,328,218,329,224,328,229,328,233,323,232,318" />

<area shape="poly" href="#" title="Co. Cork" alt="Cork"             coords="176,346,173,353,166,360,151,362,146,367,136,375,131,381,123,379,121,385,110,384,106,390,94,386,86,394,71,397,50,396,49,387,74,371,62,372,28,382,46,366,52,371,62,362,80,357,86,346,94,341,89,337,87,318,92,311,104,310,116,303,127,307,132,314,144,310,151,312,157,311,159,316,161,321,156,326" />

<area shape="poly" href="#" title="Co. Limerick"...

JavaScript

$(function() {
   //using the jquery map highlight plugin:
   //http://davidlynch.org/js/maphilight/docs/
  
   //initialize highlight
   $('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});


   //hover effect
   $('#maplink1').mouseover(function(e) {
      $('#map1').mouseover();
   }).mouseout(function(e) {
      $('#map1').mouseout();
   }).click(function(e) { e.preventDefault(); });
               
        
   // initialize tabbing
   $(".tabs area:eq(0)").each(function(){
       $(this).addClass("current");
   });
   $(".tab-content").each(function(){
       $(this).children(":not(:first)").hide();    
   });
            
            
   //map clicks
   $(".tabs area").click(function(){
              
   //This block is what creates highlighting by trigger the "alwaysOn", 
   var data = $(this).data('maphilight') || {};
   data.alwaysOn = !data.alwaysOn;
   $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
   //there is also "neverOn" in the docs, but not sure how to get it to work
              
          
   if ($(this).hasClass("current") == false)
   {
       var thisTarget = $(this).attr("href");
                                               
       $(this).parents(".tabs").find('area.current').removeClass('current');
                    
       $(this).addClass('current');
                    
       $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
           $(thisTarget).fadeIn("fast");
       });

   }
   return false; 
  });
});