This is my second post on Jquery, it came from an need to create a map for a client. The idea it was to have a map, and when hover a certain area that area is highlighted; You can also click on an area, and that area remains selected;

You can see in the preview below what i mean:

To create this map, you simply need to follow the steps below:

1) Have the entire region map in one color – the basic color:

2) Slice the regions – having the hover color: – note that this picture bust be with transparent background, and same dimensions as the entire picture; this is crucial for map functioning.

3) Repeat the above step for the rest of the regions

4) Define the image map for the whole picture:

Eg:

5) Add the picture for the hove region:
6) Repeat the above step for all regions
7) Here it comes the magic: – import the jquery library:
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js">

8) Make visible the needed region when hover over the map:

$(document).ready(function(){	

			/* Start Map Controls*/
			jQuery("#map-container area").mouseover(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';
				jQuery(regionMap).css('display', 'inline');

			}).mouseout(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';

				// Check if a click event has occured and only change the Region hover state accodringly
				if (! jQuery(regionMap).hasClass('selected')) {
					jQuery(regionMap).css('display', 'none');
				}

			});

			jQuery("#map-container area").click(function(){
				jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
				jQuery('#practice-container ul').removeClass('selected').css('display', 'none');

				var regionMap = '.'+$(this).attr('id')+'-map';
				jQuery(regionMap).addClass('selected').css('display', 'inline');
			});
			/* End Map Controls*

});

That would be all:
You can see the full working example on this page: Jquery map example
For any questions, just drop me an message
Thanks