Distinguishing Between Multiple Map Areas Same Image

The idea is simple, one area map replaces the image with image A, the other area map replaces the image with image B sort of like this page. The code I have so far is below. How this is supposed to go?

Code:
img.imenu {margin: 2px 0px; height: 20px;
width: 175px; border-width: 0px;
border-width: 0px; margin-top: 2px; margin-bottom:2px;}
</style>
<script type="text/javascript">
function mouseOverMap(area) {
if (var image = document.getElementById("TheMap")){
image.src = image.src.replace("old.png","new.png");
} else if (var image = document.getElementById("TheMap2")){
image.src = image.src.replace("old.png","new2.png");
} function mouseOutMap(area) {
var image = document.getElementById("TheMap"); // not sure what you want to do with this
image.src = image.src.replace("new.png","old.png");
}
</script>

Code:
<div>
<img id="TheMap" alt="" src="images/logo1_4old.png" width="530" height="102" USEMAP="#red" USEMAP="#orange"/>
<map name="red">
<area id="area1" shape="polygon" coords="59,47, 59,7, 68,24, 86,19" href="[URL]"
onmouseover="mouseOverMap(this);" onmouseout="mouseOutMap(this);" />
</map>
<map name="orange">
<area id="area2" shape="polygon" coords="62,50, 89,20, 85,39, 102,49" href="[URL]"
onmouseover="mouseOverMap(this);" onmouseout="mouseOutMap(this);" />
</map>