mouseover image swap on imagemap

I am trying to make a clickable world map that will highlight the different regions when the mouse is over the map. To do this, I am trying to swap the entire image with another that has the region highlighted.

In firefox, the entire map disappears when I mouse over.
In IE, a small box with an 'x' (broken image link?) appears.

http://www.newworlddrumming.com/index2.html

I really don't know javascript, but I found these functions on a web page and modified them for my own.

 <!--This section preloads the different map images -->
				<SCRIPT LANGUAGE="javascript">
				worldmap = new Image(231,532)
				worldmap.src = "style/worldmap.jpg"
				
				europe = new Image(231,532)
				europe.src = "style/europe.jpg"
				
				asia = new Image(231,532)
				asia.src = "style/asia.jpg"
				
				northamerica = new Image(231,532)
				northamerica.src = "style/northamerica.jpg"
				
				southamerica = new Image(231,532)
				southamerica.src = "style/southamerica.jpg"
				
				oceania = new Image(231,532)
				oceania.src = "style/oceania.jpg"
				
				middleeast = new Image(231,532)
				middleeast.src = "style/middleeast.jpg"
				</SCRIPT> 
                
                <!-- this section gives the functions to display the different images -->
                
                <SCRIPT LANGUAGE="javascript">

				function asia() {
				document.emp.src = asia.src; return true;
				}
				
				function europe() {
				document.emp.src = europe.src; return true;
				}
				
				function northamerica() {
				document.emp.src = northamerica.src; return true;
				}
				
				function southamerica() {
				document.emp.src = southamerica.src; return true;
				}
				
				function oceania() {
				document.emp.src = oceania.src; return true;
				}
				
				function middleeast() {
				document.emp.src = middleeast.src; return true;
				}
				
				function worldmap() {
				document.emp.src = worldmap.src; return true;
				}
				
				</SCRIPT> 
                <div id="map">
                <img name="emp" src="style/worldmap.jpg" alt="" usemap="#worldmap" style="border-style:none"/>
                        <map id="worldmap" name="worldmap">
                        <area shape="poly" alt="" coords="292,91,308,120,325,115,350,102,347,96,353,82,341,79,343,75,335,75,333,79,284,82" onMouseOver="middleeast()" onMouseOut="worldmap()" href="middleeast.php" />
                        <area shape="poly" alt="" coords="112,120,123,112,121,104,130,103,133,95,198,55,208,41,239,22,202,9,57,26,54,33,5,31,0,64,35,56,59,69,77,100,97,114" onMouseOver="northamerica()" onMouseOut="worldmap()" href="northamerica.php" />
                        <area shape="poly" alt="" coords="113,120,122,113,121,105,130,103,132,98,156,107,151,119,174,132,194,142,198,151,190,172,164,195,153,209,166,211,164,216,146,221,132,212,142,165,132,158,126,146,128,136,131,131" onMouseOver="southamerica()" onMouseOut="worldmap()" href="southamerica.php" />
                        <area shape="poly" alt="" coords="308,119,295,97,290,90,264,87,258,83,231,88,219,98,220,122,233,133,254,135,263,154,260,162,270,189,281,191,294,180,298,175,314,177,320,156,306,154,305,146,319,130,321,120" onMouseOver="africa()" onMouseOut="worldmap()" href="africa.php" />
                        <area shape="poly" alt="" coords="325,78,320,70,329,62,343,62,343,50,344,38,341,32,349,27,345,24,308,24,308,19,349,19,361,30,378,26,372,21,388,17,440,31,440,25,466,28,466,32,498,35,501,31,511,32,513,38,525,47,520,50,506,47,485,54,472,68,467,59,466,55,450,55,454,61,458,77,445,91,426,97,423,108,429,122,438,135,452,142,445,152,429,154,413,156,394,149,378,130,383,125,383,118,373,112,363,118,365,131,357,131,345,104,351,102,348,96,354,81,341,79,343,74,334,74,332,78" onMouseOver="asia()" onMouseOut="worldmap()" href="asia.php" />
                        <area shape="poly" alt="" coords= "445,151,453,141,467,139,483,151,495,161,518,154,523,161,500,178,505,197,486,213,453,203,432,187,410,192,404,167,417,162,429,153" onMouseOver="oceania()" onMouseOut="worldmap()" href="oceania.php" />
                        <area shape="poly" alt="" coords="324,77,282,81,286,88,275,89,262,84,248,82,247,85,232,88,229,81,229,66,208,42,226,40,262,18,289,20,288,31,306,34,322,29,343,25,345,28,342,61,327,61,319,69" onMouseOver="europe()" onMouseOut="worldmap()" href="europe.php" />
                        <area shape="default" nohref="nohref" alt="" />
                    </map>
               </div>  

HTML:

 

when the function is being called..for example asia() it doesn't know what the src of the image is supposed to be and it is return undefined.

try getting rid of the dimensions in the constructor
asia = new Image()
asia.src = "style/asia.jpg"

Make your life easier and install the FF extenstion Firebug which makes debugging javascript much easier

 

I installed the Firebug extension, and made the changes you suggested. I still get the same symptoms and firebug says src=undefined after I do the mouseover.

Is it a problem with preloading the images? I am completely js illiterate.