Distinguishing between multiple map areas on the same image (and js functions)

JavaScript
1

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. Any ideas on how this is supposed to go?


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>


  <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="http://google.com"
          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="http://google.com"
          onmouseover="mouseOverMap(this);" onmouseout="mouseOutMap(this);" />
</map>
2

Dont use image.src.replace(), just use image.src = “some_image.jpg”