풍선 도움말 1 | ../ |
링크가 페이지에 있는 위치에 따라서 가장 근접하게 안내말을 보여주기 위해서 링크의 이벤트를 사용합니다. 아래는 event를 처리하는 링크의 mouseover, mouseout 이벤트 지정입니다.
<a href="" onMouseOver="popUp('D1', event)" onMouseOut="popDown('D1')"
>풍선 도움말</a>
<div id=D1 style="
position:absolute; left:0; top:0; width:200; padding:5px;
background-color:yellow; layer-background-color:yellow;
visibility:hidden;
">이것은 풍선 도움말입니다.</div>
위의 링크지정입니다. popUp('D1', event) 에서 'D1'은 안내말로 보여줄 레이어입니다. event는 mouseover
이벤트 자신을 말합니다. onMouseOut="popDown('D1') 는 마우스를 치웠으므로 안내말 레이어를 닫습니다.
아래는 이것을 처리하는 함수 popUp(), popDown입니다.
<script>
function popUp(L, e) {
if(n4) {
var barron = document.layers[L]
barron.left = e.pageX
barron.top = e.pageY + 5
barron.visibility = "visible"
}
else if(e4) {
var barron = document.all[L]
barron.style.pixelLeft = event.clientX + document.body.scrollLeft
barron.style.pixelTop = event.clientY + document.body.scrollTop + 5
barron.style.visibility = "visible"
}
}
function popDown(L) {
if(n4) document.layers[L].visibility = "hidden"
else if(e4) document.all[L].style.visibility = "hidden"
}
n4 = (document.layers) ? 1 : 0
e4 = (document.all) ? 1 : 0
</script>
위의 두 함수로 안내창을 보져주고 닫는 동작을 수행합니다. 페이지에 안내창을 열 링크가 많다면
사용할 레이어를 만들어 주고 링크에게 각각 위의 이벤트 지정을 하면 됩니다. 그리고
위의 구문에 보면 아래의 두 줄이 있습니다.
barron.top = e.pageY + 5 barron.style.pixelTop = event.clientY + document.body.scrollTop + 5더하기 5를 해준 것은 링크에게 마우스를 가져갔을 때, 링크의 크기에 따라서 안내창을 여는데 너무 마우스 가까이에 열리면 좀 떨리는 동작을 합니다. 링크로 사용할 것이 이미지라면 이미지의 크기에 따라서 알맞은 값을 더해주면 됩니다.
위의 "풍선 도움말" 링크는 페이지의 왼쪽에 있습니다. 만약 링크가 페이지의 오른쪽에 있으면 안내말이 페이지 밖으로 나갈 수 있습니다.
위의 링크에게 마우스를 가져가 보세요. 안내말이 마우스가 링크에게 가는 위치에 따라서 페이지 밖으로 잘려 나갑니다. 이것을 해결하기 위해서는 여러가지 방법이 있겠지만 "안내창 위치 시키기" 페이지의 다소 복잡한 방법으로 사용하는 것이 가장 확실할 것입니다. 아니면 링크를 풍선 안내창의 크기만큼 페이지의 오른쪽에서 여유를 두면 될것입니다. table이나 margin을 사용하면 될것입니다.