<!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=utf-8" />
<title>无标题文档</title>
</head>
<frameset rows="*" cols="214,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF0000">
   <frame src="1.html"  name="leftFrame" scrolling="no" noresize="noresize" id="leftFrame" title="leftFrame" />
   <frame src="2.html" name="mainFrame"  id="mainFrame" title="mainFrame" />
</frameset>
</html>
 

左边框架

<!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=utf-8" />
<title>无标题文档</title>
<script>
 function change(num)
 {
  var i=(parseInt(num)-1)
  var anchorname=parent.frames[1].document.anchors[i].name
  alert(anchorname);
  parent.frames[1].document.location="2.html#"+anchorname;
 }
</script>
</head>

<body>
<p><a href="#" οnmοuseοver="change('1')">目录1</a></p>
<p><a href="#" οnmοuseοver="change('2')">目录2</a></p>
<p><a href="#" οnmοuseοver="change('3')">目录3</a></p>
<p><a href="#" οnmοuseοver="change('4')">目录4</a></p>
</body>
</html>
 

右边框架

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<a name="t1"><img src="p_w_picpaths/1.jpg" width="400" height="300" /></a><br />
<a name="t2"><img src="p_w_picpaths/2.jpg" width="400" height="300" /></a><br />
<a name="t3"><img src="p_w_picpaths/3.jpg" width="400" height="300" /></a><br />
<a name="t4"><img src="p_w_picpaths/4.jpg" width="400" height="300" /></a><br />
</body>
</html>