JQuery map help

JavaScript
1

Hi ppl,

I am trying to create an image map, and I can’t workout how to get the image to swap on rollover.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map Region 12</title>
<link href="style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
$.preloadImages("images/map-region.jpg",
	"images/map-region-69.jpg",
	"images/map-region-70.jpg",
	"images/map-region-72.jpg",
	"images/map-region-73.jpg");
 
$(document).ready(function(){
	$('#nav-map a, area').mouseover(function(event){
		var rolloverClass = $(this).attr('class');
		var imgSrc = 'images/map-region-'+rolloverClass+'.jpg'
		$('img#image-map').attr('src',imgSrc);
	});
});
 
</script>

</head>

<body>
<div id="nav-map"> 
		
		
  <img id="image-map" usemap="#map" src="images/map-region.jpg" width="360" height="270" alt="Toastmasters Region 12" title="" /> 
					
  <map name="map">
          
				  <area class="72" shape="poly" coords="228,261,230,247,243,239,257,221,265,207,254,181,271,176,282,198,295,205,280,233,258,264,235,269,229,260" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" />
				  <area class="73" shape="poly" coords="87,74,76,60,61,76,39,93,5,117,5,146,10,189,35,197,80,176,100,177,126,189,146,211,169,214,170,221,180,235,199,222,198,206,180,197,155,186,152,174,152,137,88,136,86,75" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" />
				  <area class="70" shape="poly" coords="220,150,210,152,199,152,154,152,152,178,167,193,189,198,200,204,212,188,220,150" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" />
    <area class="69" shape="poly" coords="88,74,90,135,152,138,153,152,207,150,220,148,219,131,198,107,184,90,172,67,162,46,173,34,192,44,206,47,199,32,192,20,154,3,153,38,158,45,158,56,157,70,146,86,126,69,130,56,107,50,91,64,89,73" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" />
	<area class="69" shape="rect" coords="250,13,349,35" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" />
    <area class="70" shape="rect" coords="249,37,347,58" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" />
    <area class="72" shape="rect" coords="250,61,349,83"  href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand"  />
    <area class="73" shape="rect" coords="251,85,350,106" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" />
  </map> 
</div>
</body>
</html>

In my mind this should work (which doesn’t mean much), though there is a good chance I am missing something fundamental and basic.
Any help would be appreciated.

Lee

2

Never Mind…Worked it out!

3

Hi leelove,

Any chance you could share how you worked it out? I’ve been having a similar problem…

Would really appreciate seeing your solution.

Best regards,

Heath