안내창 위치시키기 2

<style>
#S1 { position:absolute; top:0; left:0; width:200; visibility:hidden; 
	background-color:#eeeeee; layer-background-color:#eeeeee; 
	border-width:10; border-style:ridge; border-color:red; font-size:10pt; 
} 
</style>

<div id=S1>
<P ALIGN="RIGHT"><a href="#" onClick="hideLayer('S1'); return false">close</a></P>
안내창을 열었습니다. <br> 오른쪽 위의 close를 누르면 창을 닫습니다.
</div>

위의 링크를 누르면 visibility:hidden으로 지정되어 있는 위의 S1 레이어를 visibility:visible로 하여 보여주고 click 이벤트 좌표를 레이어의 top 값으로 지정합니다. 그래서, 링크의 위치에 상관없이 링크 바로 아래에 레이어를 보여줄 수 있습니다.

<a href="#" onClick="showLayer('S1', event); return false">안내창 보기</a>

function showLayer(X, e) {
	var OBJ
	if(n4) { 
		OBJ = document.layers[X]
		OBJ.left = e.pageX - parseInt(OBJ.document.width/2)
		OBJ.top = e.pageY
		OBJ.visibility = "visible"
	}
	else if(e4) {
		OBJ = document.all[X]
		OBJ.style.pixelTop = event.clientY + document.body.scrollTop 
		OBJ.style.pixelLeft = event.clientX + document.body.scrollLeft  - parseInt(OBJ.offsetWidth/2)
		OBJ.style.visibility = "visible"
	}
}

OBJ.document.width는 nn4에서 레이어의 크기를 나타냅니다. ie4는 OBJ.offsetWidth입니다 . 이 둘은 border를 포함한 레이어 전체의 크기입니다. 이것을 넣은 이유는 링크의 중앙으로 안내창을 위치 시키기 위해서입니다.

안내창 안의 close는 안내창 레이어의 visibility를 hidden으로 지정하여 창을 닫는 것입니다.


위의 안내창은 작은 창입니다. 만약, 안내창이 크다면 페이지에서의 위치시킴에 다소 문제가 있습니다. 링크가 페이지 중앙에 있는데, 안내창이 페이지 절반보다 크다면 이동막대를 끌어옮겨야 안내창을 다 볼 수 있습니다. 이 때는 페이지 중앙에 위치시키는 것이 좋습니다. 비록 링크를 덮어버리지만, 페이지에서 가장 중앙에 오는것이 한눈에 보기가 좋기 때문입니다. 또는 링크가 보이는 페이지의 맨아래에 있는데, 위의 코드를 사용하면 이동막대(scrollbar)를 사용해야 합니다. 이 때는 안내창을 링크 위에 오도록 하는것이 한눈에 볼 수 있습니다.

그리고, nn4에서 레이어를 이동시 주의해야할 점이 있습니다.

ie4는 페이지를 처음 출력할 때와 레이어를 이동했을 때 이동한 만큼의 위치만큼 이동막대가 갱신이 되지만, nn4는 처음 한번 출력할 때만 페이지의 크기를 볼 수 있는 이동막대가 생깁니다. 그래서, 레이어를 이동막대로 움직여서 볼 수 있는 처음 출력시의 페이지 크기보다 큰 좌표로 이동시키면 페이지 크기를 벗어난 부분은 볼 수가 없습니다. nn4의 이 문제를 해결하기 위해 페이지의 가장 아래에 가장 큰 안내창의 크기 만큼의 빈 table를 넣어주면 벗어난 부분은 생기지 않지만, 그 만큼 페이지가 빈 페이지로 남습니다. 이상한 페이지가 됩니다.

그래서, 안내창을 보여줄 때 주의해야 할 점이 크게 두가지입니다. 링크위치와 안내창의 위치, nn4에서 전체 문서 외부로 안내창 보내지 않기를 들 수 있습니다.

--
nn4에서 border를 지정한 css element가 많을 때 다운되는 경우가 많습니다. 레이어의 border는 피해야 겠습니다. 레이어와 table은 문제가 없습니다. table의 border로 레이어 border의 효과를 내야겠습니다.

안내창 위치시키기 2