HOME PAGE

프레임을 가지고 있는 페이지에서 링크로 다른 페이지에 문서를 가지고 올 때 링크를 모아놓은 페이지는 여러개의 링크가 있습니다. 여기서 한 링크를 누르면 연결된 문서를 다른 프레임에 보여주고 자신의 링크의 색깔을 바꾸어 줍니다. 그래서, 불려온 페이지가 현재 어떤 링크에서 왔는가를 쉽게 구분하여 줍니다.

조그마한 이미지들로 이것을 표시하거나 전체 프레임을 재출력하여 표시할 수 있지만, 버젼4의 브라우저에서는 더욱 효과적으로 이것을 할 수가 있습니다. ie4에서는 style.color로 nn4에서는 레이어의 zIndex값을 바꾸어주는 moveBelow()로 가능합니다.

ie4에서는 style.color="yellow"로 어떤 글자들의 색을 바꿔줄 수 있습니다. 한개의 링크가 눌려져서 노란색으로 되었다면 다른 링크를 눌렀을 때 그 링크를 노란색으로 하고 그 링크의 노란색과 구분하기 위해서 다른 링크들을 전부 노란색이 아닌색으로 초기화 시켜버립니다. 그리고 다시 노란색을 지정해 주면 링크의 색깔이 구분됩니다. 이것을 하기 위해서 아래의 코드를사용할 수 있습니다.

function ieClearColor() {
	if(!e4) return; //ie4외에는 탈출함. 
	var DIV = document.all.tags("font")
	for (var i=0; i < DIV.length; i++) {
		DIV[i].style.color='';
	}
}

<div id=D1>
	<a href=".."><font color="yellow">링크</font></a>
</div>
<div id=D11>
	<a href=".."><font>링크</font></a>
</div>

function nnClearColor() {
	if( clearThis ) eval(clearThis)
}
clearThis="";

<div id=D1>
	<a href="home.htm" target="right" 
	onClick="if(n4) { 
		nnClearColor(); 
		clearThis='document.D11.moveBelow(document.D1)'; 
		self.document.D1.moveBelow(self.document.D11); 
	}" 
	><font color="yellow" onClick="ieClearColor(); this.style.color='yellow'">HOME</font></a>
</div>
<div id=D11>
	<a href="home.htm" target="right" 
	onClick="if(n4) { 
		nnClearColor(); 
		clearThis='document.D1.moveBelow(document.D11)'; 
		self.document.D11.moveBelow(self.document.D1); 
	}" 
	><font onClick="ieClearColor(); this.style.color='yellow'">HOME</font></a>
</div>

function nnClearColor() {
	if( clearThis ) eval(clearThis)
}
clearThis="";

<div id=D1>
	<a href="home.htm" target="right" 
	onClick="if(n4) { 
		nnClearColor(); 
		clearThis='document.D11.moveBelow(document.D1)'; 
		self.document.D1.moveBelow(self.document.D11); 
	}" 

위의 코드를 사용하다가 창의 크기를 바꾸면 nn4의 resize 버그로 인하여 링크의 색깔이 처음의 색깔과 다르게 나올수 있습니다. 그래서, 아래의 코드를 넣어주어야 합니다. body의 onLoad 이벤트헨들러에 지정을 해야합니다.

if(n4) 
  self.onresize=new Function("setTimeout('self.location.reload()',111)");

프레임을 글자들의 크기보다 작게하여 프레임에 이동바(scroll bar)가 생기면 계속 페이지를 재출력합니다. 일반적으로 이런 경우는 잘 없겠지만 그런일이 생깁니다. 하지만, 처음 페이지를 설계할 때, 이동바가 생기면 창의 크기를 변경하면 계속 페이지를 재출력합니다.

링크 글자들의 크기와 프레임 페이지의 크기가 상관없는 변경할 수 없는 페이지에서 사용가능한 코드입니다. 이것을 어떻게 해결해야 할지 아직은 모르겠습니다. nn에서 4.05까지 모두 계속 재출력을 합니다. 창의 크기를 수정하지 못하게 하는 것 외에는 방법이 없을 것 같습니다. 가장 심각한 버그인데..

그리고, nn3에서는 왼쪽 프레임의 페이지가 ..

HOME
HOME

SOURCE
SOURCE

LINK
LINK

위의 식으로 나옵니다. nn3는 div택과 style을 지원하지 않기 때문에 이런 페이지가 나옵니다. 이것을 해결하기 위해서 document.write()로 각 링크의 처음 링크를 브라우저를 구분하여 페이지에 써줄 수도 있지만, 이것은 코드가 길어지고 프레임의 링크모음 같은 경우는 페이지 양이 적기 때문에 처음 nn3를 위한 페이지를 따로 만드는것이 좋을 것입니다.

if(document.layers || document.all) self.location.href = "version4.htm"
else self.location.href = "version3.htm"

이 예제 페이지를 만들면서 처음으로 사용한 것은 nn4의 레이어의 document.write(), document.close()로 하여 nn4에서 이런 효과를 낼수도 있었지만, 코드가 너무 복잡해지고 많은 링크를 시험삼아 눌러보면 처음 몇번의 링크는 작동을 했지만, 많이 누르면 알수 없는 에러가 나왔습니다.

나중에 링크를 추가하거나 관리라는 것을 염두에 둔다면 이 페이지의 방법이 나은 것이라고 생각합니다.