TAB切换效果 

<title>TAB切换效果</title>
<script type="text/javascript">
function change(ss){
    if(ss=="top1"){
        document.getElementById("left1").style.display="block";
        document.getElementById("left2").style.display="none";
        document.getElementById("right1").style.display="block";
        document.getElementById("right2").style.display="none";
        document.getElementById("end1").style.display="block";
        document.getElementById("end2").style.display="none";
        }
else{
        document.getElementById("left1").style.display="none";
        document.getElementById("left2").style.display="block";
        document.getElementById("right1").style.display="none";
        document.getElementById("right2").style.display="block";
        document.getElementById("end1").style.display="none";
        document.getElementById("end2").style.display="block";    
    }
}
</script>
<style type="text/css">
img{border:0;}
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/left1.jpg" alt="笔记本" id="left1"/><img src="images/left2.jpg" alt="笔记本" id="left2" onmouseover="change('top1')" style="display:none;"/></td>
     <td><img src="images/right1.jpg" alt="手机充值" id="right1" onmouseover="change('top2')"/><img src="images/right2.jpg" alt="手机充值" id="right2" style="display:none;" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/end1.jpg" alt="笔记本" id="end1" /><img src="images/end2.jpg" alt="手机充值" id="end2" style="display:none;"/></td>
  </tr>
</table>

</body>

 

posted @ 2013-11-16 13:35  914556495  阅读(268)  评论(0)    收藏  举报