billederne skal lappe over hinanden!

her er min kode:


<table border="0" width="400">
<tr>
    <td width="20"><img src="img/ballon_5.gif" border="0" usemap="#maskiner" style="z-index:4;" onfocus="if(this.blur)this.blur();">
<map name="maskiner" id="maskiner">
<!-- **Billedkort lavet med Stone's WebWriter 4** -->
<area shape="circle" coords="95,114,87" href="maskiner">
<area shape="circle" coords="74,78,76" href="maskiner">
<area shape="circle" coords="112,146,79" href="maskiner">
</map></td>
    <td>
<img src="img/ballon_4.gif" border="0" usemap="#ballon" style="">
<map name="ballon" id="ballon">
<!-- **Billedkort lavet med Stone's WebWriter 4** -->
<area shape="circle" coords="92,91,86" href="ballon">
<area shape="circle" coords="106,123,88" href="ballon">
</map></td>
    <td><img src="img/ballon_2.gif" border="0" usemap="#hoppe" style="">
<map name="hoppe" id="hoppe">
<!-- **Billedkort lavet med Stone's WebWriter 4** -->
<area shape="circle" coords="84,85,79" href="hoppe">
<area shape="circle" coords="90,153,80" href="hoppe">
<area shape="circle" coords="87,116,84" href="hoppe">
</map></td>
    <td><img src="img/ballon_1.gif" border="0" usemap="#kontakt" style="z-index:5;">
<map name="kontakt" id="kontakt">
<!-- **Billedkort lavet med Stone's WebWriter 4** -->
<area shape="circle" coords="103,85,79" href="kontakt">
<area shape="circle" coords="74,151,80" href="kontakt">
<area shape="circle" coords="88,117,85" href="kontakt">

</map></td>
</tr>
</table>


med denne kode er der 4 balonner hvor der er mellemrum mellem hver ballon.

kan man ved hjælp af tabellerne få balonnerne til at lappe ind over hinanden.

hvis jeg bruger position:absolute bliver det nok grums når man går browser vinduet mindre!
Derfor ville jeg gerne lave det med tabeller så jeg kan få det centreret ordentligt!