풍선 도움말 2 | ../ |
"글자이동 풍선 도움말" 왼쪽에 마우스를 가져가 보세요. 풍선이 나오면서 풍선안의 글자들이 이동합니다. 마치 레이어 안에 <MARQUE> 택을 넣어논 것과 같은 동작을 합니다. 풍선은 레이어를 이중으로 지정한 것입니다. 사용한 STYLE은 아래입니다.
<style>
#D1 {
position:absolute; left:0; top:0;
width:200; height:30; clip:rect(0,200,30,0);
background-color:yellow;
layer-background-color:yellow;
visibility:hidden;
}
#S1 { position:absolute; left:0; top:0; width:200; padding:5; }
</style>
<div id=D1>
<div id=S1>
<nobr>이것은 풍선 도움말입니다.
글자들이 왼쪽으로 이동하는 풍선입니다...</nobr>
</div>
</div>
일부분의 일정한 크기에서 이동하는 레이어를 구현하기 위해서는 위의 이중으로 레이어를 구성하는 것이
가장 간단합니다. 상위 레이어에게 width, clip으로 보여줄 크기를 지정하면 쉽게 구현할 수 있기
때문입니다. 일정한 크기를 clip한 레이어안에 있는 레이어를 이동시키면 이런 효과가 납니다.
이동 시켜줄 레이어는 위의 'S1' 레이어입니다.
아래는 위의 링크 "글자이동 풍선 도움말" 링크에 지정한 이벤트입니다.
<a href="" onMouseOver="popUp('D1', 'S1', event)" onMouseOut="popDown('D1')"
>글자이동 풍선 도움말</a>
mouseover 이벤트에 지정하는 인자가 하나 더 있습니다. 바로 이동시킬 레이어인 'S1'입니다. 다른 것은
앞 페이지와 같습니다. 그리고 전체 사용한 JavaScript 구문은 아래입니다.
function popUp(L, S, e) {
clearTimeout(barron_ID)
if(n4) {
var barron = document.layers[L]
barron.left = e.pageX
barron.top = e.pageY + 10
barron.visibility = "visible"
X = barron.document.layers[S]
scrollGo()
}
else if(e4) {
var barron = document.all[L]
barron.style.pixelLeft = event.clientX + document.body.scrollLeft
barron.style.pixelTop = event.clientY + document.body.scrollTop + 10
barron.style.visibility = "visible"
X = document.all[S]
scrollGo()
}
}
function popDown(L) {
if(n4) {
clearTimeout(barron_ID)
X.left = 0
document.layers[L].visibility = "hidden"
}
else if(e4) {
clearTimeout(barron_ID)
X.style.pixelLeft = 0
document.all[L].style.visibility = "hidden"
}
}
function scrollGo() {
if (n4) {
if ( X.left > (X.document.width * -1) ) {
X.left += -1
barron_ID = setTimeout("scrollGo()", 10);
}
else {
X.left=190;
scrollGo();
}
}
else {
if ( X.style.pixelLeft > (X.offsetWidth * -1) ) {
X.style.pixelLeft += -1
barron_ID = setTimeout("scrollGo()", 10);
}
else {
X.style.pixelLeft=190;
scrollGo();
}
}
}
n4 = (document.layers) ? 1 : 0
e4 = (document.all) ? 1 : 0
barron_ID = null
마우스가 링크에게 가면 먼저 레이어를 보여주고 하위 레이어 'S1'을 이동시키는 scrollGo() 를
실행합니다. 실행하는 범위는 상위 레이어 'D1'의 크기 안에서 입니다. scrollGo() 함수안의
X.document.width, X.offsetWidth 입니다. 이것이 레이어의 넓이인데 레이어의 크기에 관하여는
"DHTML - Style 도안 - 레이어와 페이지의 크기" 페이지를 참고 하세요.