用表格做的滑动门效果

[原创]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function clearall()
{
     
}



 
function  changeImage(m)
 
{
 
for (var i=1;i<4;i++
    
{
    
//在点击图片时把所有的表格设为隐藏,并且把所有的图片设为灰暗色图片
       eval("tb"+i).style.display="none";
     
       eval(
"bt"+i).src="images/hdm"+i+"1.gif";
     }

   clearall();
     eval(
"bt"+m).src="images/hdm"+m+"2.gif";
     eval(
"tb"+m).style.display="";
     }


</script>

</head>

<body>
<table width="247" border="0" cellpadding="0" cellspacing="0">
  
<tr>
    
<td width="75"><img style="cursor:hand" src="images/hdm12.gif" width="75" height="35" name="bt1" id="bt1" onclick="changeImage(1);" /></td>
    
<td width="75"><img style="cursor:hand" src="images/hdm21.gif" width="75" height="35" name="bt2" id="bt2"  onclick="changeImage(2)"/></td>
    
<td width="75"><img style="cursor:hand" src="images/hdm31.gif" width="75" height="35" name="bt3" id="bt3" onclick="changeImage(3)"/></td>
  
</tr>
</table>
<table width="455" height="50" border="1" id="tb1">
  
<tr>
    
<td width="462" valign="top">111111111111111111111<img src="images/金泰妍2.jpg" width="422" height="717" /></td>
  
</tr>
</table>
<table width="432" border="1" id="tb2"  style="display:none;">
  
<tr>
    
<td width="422"><p>222222222222222222222222222<img src="images/金泰妍1.jpg" width="422" height="717" /></p>
    
<p>&nbsp;</p>
    
</td>
  
</tr>
</table>
<table width="432" border="1" id="tb3"  style="display:none;">
  
<tr>
    
<td width="422" height="734">33333333333333333333333333333<img src="images/金泰妍3.jpg" width="422" height="717" /></td>
  
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

posted on 2008-04-13 22:13  鱼跃于渊  阅读(361)  评论(0)    收藏  举报

导航