html 图像重叠 position 及 display overflow 边框像素

<style type="text/css">
.im
{
width:40px;
height:40px;
border:0px solid red;
vertical-align:top;
display:block;
position: relative;
Z-index:10;
left:0px;
top:-40px;
}

</style>
<table border=1 style="width:100%">
<tr>
 <td style="width:50%;">
  1111
 </td>
 <td>
  2222
 </td>
</tr>
<tr>
 <td>
  111
 </td>
 <td>
  <div style = "border:1px solid red;width:500px;height:300px;overflow:hidden;">
   <img src="001.jpg" style ="border:1px solid red;width:500px;height:290px;display:block;"></img>

   <img border='0' src="002.jpg" id = "show" name= "show" class="im" usemap="#umap"></img>
   <map name="umap">
    <area shape="rect" coords="0,0,40,40" href ="javascript:void(0)" onclick = "aaa();"/>
   </map>
  </div>
 </td>
</tr>
</table>
<script type="text/javascript">
 function aaa(){
  alert("1111");
  document.getElementById("show").src = "003.jpg";
 }
 function bbb(){
  alert("1111");
  document.getElementById("show2").src = "003.jpg";
  sss = document.getElementById("show2").style;
  alert(sss);
 }
</script>
   
   <!--<div style = "position: relative;Z-index:10;left:0px;top:-110px;bottom:0px;">

   <img border='0' src="002.jpg" id = "show" name= "show" style ="display:block;position: relative;Z-index:10;left:0px;top:-110px;width:100px;height:100px" usemap="#umap"></img>
   <img border='0' src="002.jpg" id = "show2" name= "show2" style ="display:block;position: relative;Z-index:10;left:110px;top:-220px;width:100px;height:100px" usemap="#u2map"></img>
   <map name="umap">
    <area shape="rect" coords="0,0,100,100" href ="javascript:void(0)" onclick = "aaa();"/>
   </map>
   <!--<div style = "position: relative;Z-index:10;left:110px;top:-220px;bottom:0px;">-->
   
   
   <map name="u2map">
    <area shape="rect" coords="0,0,100,100" href ="javascript:void(0)" onclick = "bbb();"/>
   </map>