onClick disable onMouseOut and make swap image default image

[wkerplunk]

On mouseover it goes to the correct map say TheMap1.jpg and then on mouseOut it defaults back to map, I need to do a onClick that sets the TheMap1.jpg mouseOver to the default TheMap.jpg so the TheMap1.jpg is now the default image not the TheMap.jpg. So after I click for information, and mouseOut of that area TheMap1.jpg will stay as all the MouseOuts Until I click another area of the map say TheMap10.jpg once clicked TheMap10.jpg will become the default image.

See code/ example of what I am doing http://www.wrighter.com/map

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

    if(document.images)
    {
      imagemap_TheMap = new Image();
      imagemap_TheMap.src = '/wcss/images/TheMap.jpg';
      imagemap_TheMap1 = new Image();
      imagemap_TheMap1.src = '/wcss/images/TheMap1.jpg';
      imagemap_TheMap2 = new Image();
      imagemap_TheMap2.src = '/wcss/images/TheMap2.jpg';
      imagemap_TheMap3 = new Image();
      imagemap_TheMap3.src = '/wcss/images/TheMap3.jpg';;
      imagemap_TheMap4 = new Image();
      imagemap_TheMap4.src = '/wcss/images/TheMap4.jpg';
      imagemap_TheMap5 = new Image();
      imagemap_TheMap5.src = '/wcss/images/TheMap5.jpg';
      imagemap_TheMap6 = new Image();
      imagemap_TheMap6.src = '/wcss/images/TheMap6.jpg';
      imagemap_TheMap7 = new Image();
      imagemap_TheMap7.src = '/wcss/images/TheMap7.jpg';
      imagemap_TheMap8 = new Image();
      imagemap_TheMap8.src = '/wcss/images/TheMap8.jpg';
      imagemap_TheMap9 = new Image();
      imagemap_TheMap9.src = '/wcss/images/TheMap9.jpg';
      imagemap_TheMap10 = new Image();
      imagemap_TheMap10.src = '/wcss/images/TheMap10.jpg';
      imagemap_TheMap11 = new Image();
      imagemap_TheMap11.src = '/wcss/images/TheMap11.jpg';
    }
    function rollOver(iName,iState)
    {
      if(document.images)
      {
        document.images[iName].src = eval(iName + '_' + iState + '.src');
      }
    }
 

// -->
</SCRIPT>

[acoder]

Just set the src of the image(s) onclick to the onmouseover image, e.g. onclick = "this.src = imageMap.src" or even call rollOver with the correct parameters. If all images need to be changed, use document.getElementsByTagName("img") to get all the images to loop over and set the src of each.