用框架实现的,给个例子你,还有menu.htm和right.htm没有贴出来,自己写一个吧,这两个页面没什么内容,用不同的背景色,你就能看到效果了
main.htm(框架页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="85,*" cols="*" frameborder="NO" border="0" framespacing="0">
  <frame src="title.htm" name="topFrame" scrolling="NO" noresize>
  <frameset rows="*" cols="200,*" framespacing="0" frameborder="NO" border="0">
    <frame src="menu.htm" name="menuFrame" scrolling="NO">
    <frame src="right.htm" name="mainFrame" scrolling="AUTO" noresize>
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
title.htm(控制页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript" src="js/menucontrol.js">
</script>
<body background="images/b_001.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center" id=hasmenu style="visibility:visible;position:absolute; left: 102px; top: 65px;"> 
  <a href="javascript:hiddenMenu()">关闭菜单</a> 
</div>
<div align="center" id=nomenu style="visibility:hidden;position:absolute; left: 1px; top: 65px;"> 
  <a href="javascript:showMenu()">打开菜单</a> 
</div>
<div align="center"><img src="images/title.jpg" width="497" height="85"></div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><script language="JavaScript"> var picArrow1 = '../images/default/franeset.pg21.gif';
    var picArrow2 = '../images/default/franeset.pg2.gif';  function resizeFrames() {  /*
    top代表的是所有frame对
    象的最高级对象也就是上面定义整体结构的代码,
    top.contentFrameset 就取得要控制的frame对象,
    然后就修改top.contentFrameset 对象的cols属性为一个新的值.来达到隐藏帧的效果
    */   if (top.contentFrameset.cols=="0,12,*") { top.contentFrameset.cols="190,12,*"; 
    imgArrow.src = picArrow1;

    }
    else{

    top.contentFrameset.cols="0,12,*"; 
    imgArrow.src = picArrow2;
    }

      }
    </script><SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    <!--function imgArrow_ondragend() { //得到当前的窗口分割情况
    w = top.contentFrameset.cols;
    wLeft = w.substring(0,w.indexOf(','));

    //加上移动的位置
    wLeft -= -event.x;

    if (wLeft<190) wLeft=190;
    if (wLeft>300) wLeft=300;

    top.contentFrameset.cols=wLeft + ",12,*";}//-->
    </SCRIPT>
    </head><body leftmargin="0" topmargin="0" onkeydown="KeyDown()" oncontextmenu="event.returnValue=false">
    <table width="2%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td height="87" valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td>
          <!--img src="../images/default/imgFrmArrow01.jpg" width="13" height="12" border="0" id=imgArrow style="cursor:hand" onClick="resizeFrames()" ondragend="return imgArrow_ondragend()"-->
          <img src="../images/default/franeset.pg21.gif" width="13" height="12" border="0" id="imgArrow" style="cursor:hand" onClick="resizeFrames()" ondragend="return imgArrow_ondragend()"></td>
      </tr>
    </table>
    </body>
    </html>