Adding Previous/Next Functionality to jQuery Map Highlight Plugin

As you can see in my jsFiddle example, I have a diagram that uses jQuery Map Highlight plugin to allow users to click to different parts of the diagram and see the corresponding text to the left.

Right now, the only way to interact with the diagram is by clicking on it. I'd like to give users the ability to h开发者_JAVA百科it previous and next buttons to control it as well. I'm just not sure how to go about it.

Any help would be appreciated: http://jsfiddle.net/keith/jkLH7/1/

I think you can do this pretty simply by triggering your existing click handlers:

$('#map-previous').click(function(){
  var currentAreaIndex = $('area.current').index();
  var prevAreaIndex = currentAreaIndex - 1;  

  // If .eq() gets -1 as a parameter it retrieves the last item 
  // You could disable the link if you didn't like that behavior      
  $('area').eq(prevAreaIndex).click();  
});

$('#map-next').click(function(){
  var currentAreaIndex = $('area.current').index();
  var nextAreaIndex = currentAreaIndex + 1;  

  var $areas = $('area');

   // Here you'll need to manually handle the wrap-around case    
  if (nextAreaIndex > $areas.length){
     nextAreaIndex = 0;
  }

  $('area').eq(nextAreaIndex).click();  
});

You could control the order of the areas by changing the order of the HTML...