HTML/Javascript Overlaying Images on Region Mouseovers
<script type="text/javascript">
    function area1_mouseover() {
        document.getElementById('image2').style.visibility = 'visible';
    }
    function area1_mouseout() {
        document.getElementById('image2').style.visibility = 'hidden';
    }
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>