Swap image with mouse over bitmap field

In HTML page with image map with a menu of options, I want to change part of the image to another of the size of the field defined for this option, when passing the mouse , something like onfocus or onmouseover . How do I, in this example, replace (overlap) each part of the image delimited by the coordinates by another such as opcao1foco.jpg , opcao2foco.jpg ? Thank you in advance for the support.

Example:

<p>
  <map name="FPMap0">
    <area href="opcao1.htm" shape="rect" coords="238, 89, 333, 194">
    <area href="opcao2.htm" shape="rect" coords="348, 89, 542, 198">
  </map>
  <img border="0" src="menu.png" width="1067" height="274" usemap="#FPMap0">
</p>