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:

<img class=”map” width=”234″ height=”298″ border=”0″ usemap=”#regionMapView” alt=”" src=”images/transparentMap.gif”>
<map id=”regionMapView” name=”regionMapView”>
<area id=”midtjylland” shape=”poly” coords=”12, 98, 8, 110, 7, 140, 6, 156, 8, 175, 15, 177, 17, 176, 24, 179, 27, 173, 40, 172, 42, 170, 45, 170, 49, 176, 58, 165, 66, 168, 84, 189, 96, 187, 124, 182, 128, 170, 120, 162, 140, 125, 171, 99, 164, 99, 140, 124, 132, 115, 117, 117, 110, 109, 110, 102, 87, 114, 71, 102, 57, 104, 53, 88, 35, 105, 23, 100, 20, 110 “ onclick=”" title=”Midtjylland”>
</map>
5) Add the picture for the hove region:
<img class=”region midtjylland-map” alt=”Midtjylland” src=”images/midtjylland.png” style=”display: none;”>
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"></script>

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