1번 테이블
<table width="100%"  border="0" cellpadding="0" cellspacing="0" id="ShowHideTable_1" style="display:block">
<tr>
 <td><img src="img/table_1_on.gif" onMouseOver="ShowTable( 1 );"></td>
 <td><img src="img/table_2_off.gif" onMouseOver="ShowTable( 2 );"></td>
 <td><img src="img/table_3_off.gif" onMouseOver="ShowTable( 3 );"></td>
</tr>
<tr>
 <td> 여기에는 내용.. 어쩌구.. 저쩌구.. </td>
</tr>
</table>
2번 테이블
<table width="100%"  border="0" cellpadding="0" cellspacing="0" id="ShowHideTable_2" style="display:block">
<tr>
 <td><img src="img/table_1_off.gif" onMouseOver="ShowTable( 1 );"></td>
 <td><img src="img/table_2_on.gif" onMouseOver="ShowTable( 2 );"></td>
 <td><img src="img/table_3_off.gif" onMouseOver="ShowTable( 3 );"></td>
</tr>
<tr>
 <td> 여기에는 내용.. 어쩌구.. 저쩌구.. </td>
</tr>
</table>
3번 테이블
<table width="100%"  border="0" cellpadding="0" cellspacing="0" id="ShowHideTable_1" style="display:block">
<tr>
 <td><img src="img/table_1_off.gif" onMouseOver="ShowTable( 1 );"></td>
 <td><img src="img/table_2_off.gif" onMouseOver="ShowTable( 2 );"></td>
 <td><img src="img/table_3_on.gif" onMouseOver="ShowTable( 3 );"></td>
</tr>
<tr>
 <td> 여기에는 내용.. 어쩌구.. 저쩌구.. </td>
</tr>
</table>

이렇게 하고 하단에 자스를..넣습니다

<script>
 function ShowTable( argNum )  {
  // 전체 테이블 갯수 지정해준다.
  var lTotalTable =3;
  for( var i = 1; i <= lTotalTable; i++ )  {
   eval( "ShowHideTable_" + i + ".style.display = 'none'" );
  }
   eval( "ShowHideTable_" + argNum + ".style.display = 'block'" );
 }
 ShowTable( 1 );
</script>

이러면 스위칭시 레이어를 보여줬다가 안보여줬다 하죠.^^