面试题要我写出一个页面，该页面用frameset分为了两半，中间有一条边框线，代码如下：
<frameset cols="15%,*" framespacing="0" frameborder="1" >
<frame src="navigate.jsp" name="left" scrolling="no" border="6"/>
<frame src="welcome2.jsp" name="main"/>
</frameset>现在要求在该边框线上加一个按钮，点击这个按钮可以显示或隐藏左边的框窗，并且当鼠标移动到该边框线上非按钮的位置时，光标就变成双向箭头的样子，移动按钮上时就变成“手”的样子。请高手指点，谢谢。
<frameset cols="15%,*" framespacing="0" frameborder="1" >
<frame src="navigate.jsp" name="left" scrolling="no" border="6"/>
<frame src="welcome2.jsp" name="main"/>
</frameset>现在要求在该边框线上加一个按钮，点击这个按钮可以显示或隐藏左边的框窗，并且当鼠标移动到该边框线上非按钮的位置时，光标就变成双向箭头的样子，移动按钮上时就变成“手”的样子。请高手指点，谢谢。
大概就是动态改变frame的宽度
第一种就是，再加一个<frame>这个frame宽度很小,里面放一个按钮，可以实现操作。在这个有按钮的页面里用js获取父页面的frameset，重设其cols属性，源代码没了，我只给你提供思路了.
第二种，就是两个frame，不加另外的那个frame，在左边的frame里，用css定位一个按钮在最右边，并用js实现隐藏，也是获得父页面的frameset，并重设他的cols属性。
第二种的css实现 这是页面中的那个按钮
<div id="splitter">
<div id="splitter_btn" class="splitter_btn"></div>
</div>
#splitter{
position:relative;
height:100%;
float:right;
width:9px;
background:transparent url(./images/splitter_bg.gif) repeat-y 0 0;
}#splitter .splitter_btn{
position:absolute;
width:9px;
height:79px;
background:transparent url(./images/splitter_l.gif) no-repeat 0 0;
top:45%;
left:0px;
cursor:hand;
}js代码：你自己看一下了，其实不应该给你，让你自己查了，这样才能学到东西。你自己再改一下了！其实差不多已经全给你了
function switchView(){
if(!parent.leftFrame)return;
var url = parent.window.location.href;
var view = url.substring(url.indexOf('view=')+5);
if(view && view != ''){
//alert(parent.leftFrame);
if(view == "1"){ //经理
window.location.href = 'left1.html';
}else if(view == "2"){
window.location.href = 'left2.html';
}else if(view == "3"){
window.location.href = 'left3.html';
}else if(view == "4"){
window.location.href = 'left4.html';
}else{
//alert("参数错误 " + view);
}
//alert("参数 " + view);
}
}
JS发错了，昨天要走了，急了function switchMenu(){
if(!parent.left) return;
if(parent.left.cols!="15,*"){
parent.left.cols="15,*";
$('splitter_btn').innerHTML="<img src='./images/splitter_r.gif' title='点击展开'>";
}
else{
parent.left.cols="210,*";
$('splitter_btn').innerHTML="<img src='./images/splitter_l.gif' title='点击隐藏'>"; //document.all.menuSwitch
}
}
left就是为父页面的frameset的name属性的值
<frameset rows="100,*" frameborder="no" border="1" framespacing="0" >
<frame name="top" src="top.jsp" marginwidth="0" marginheight="0" scrolling="no" >
<frame name="button" src="button.jsp" marginwidth="0" marginheight="0" scrolling="no">
</frameset>
button.jsp
<frameset name="button" cols="190,*" border="1" framespacing="0" frameborder="no">
<frame name="left" src="tree.jsp" marginwidth="0" marginheight="0" scrolling="no" >
<frame name="right" src="main.jsp" marginwidth="0" marginheight="0" scrolling="no" >
</frameset>
tree.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">function changeWin(){
if(parent.button.cols != "12,*"){
parent.button.cols = "12,*";
document.all.image.src = "images/last.gif";
}
else{
parent.button.cols = "185,*";
document.all.image.src = "images/first.gif";
}
}
</script>
</head>
<body >
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=100% height=500>
<iframe id=tree name=tree style="height:100%; width:100%; visibility:inherit;" scrolling=auto frameborder=0 src="menuf.jsp"></iframe></td>
<td bgcolor=#000000 width=1 ><img src=images/space.gif width=1 height=1></td>
<td bgcolor=#d0d0c8 >
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr><td nowrap width=13 bgcolor=#d0d0c8 onclick=changeWin() height=100% style="cursor: hand"><img src=images/first.gif id="image"/></td></tr>
</table>
</td>
<td bgcolor=#ffffff width=1 style="cursor: e-resize;"><img src=images/space.gif width=1 height=1></td>
</tr>
</table>
</body>
</html>
此处移动按钮上时就变成“手”的样子<td bgcolor=#ffffff width=1 style="cursor: e-resize;"> <img src=images/space.gif width=1 height=1> </td>这里被填充成白色，光标就变成双向箭头的样子，且就在frame边界，所以看上去是在frame边界时光标变成双向箭头的样子，图片随便，都会被bgcolor=#ffffff给覆盖