<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>