풍선 1 / 풍선 2 / 풍선 3 / 풍선 4

풍선안에 링크같은 것을 두기 위해서는 풍선을 닫는 mouseout 이벤트에 다른 방법을 사용하여야 합니다. 아예 mouseout 이벤트를 사용하지 않고 풍선안에 풍선을 닫는 링크를 넣어줄 수도 있지만 이것도 마우스를 한번 눌러야 하기 때문에 불편합니다. 열려진 풍선을 닫기 위해서 링크를 넣어주지 않고 풍선 레이어에게 전체에 이벤트를 capture 해주는 다소 복잡한 방법을 사용할 수도 있습니다.
오른쪽의 링크 "풍선 도움말" 은 마우스를 가져가면 풍선을 보여주고 치워도 풍선을 닫지 않습니다. 풍선을 닫기 위해서 풍선안에 닫는 링크를 두지 않고 풍선 안의 아무데나 눌러도 풍선을 닫습니다.

<a href="" onMouseOver="popUp2('D2', event)">"풍선 도움말"</a> 왼쪽의 링크는 풍선을 
열기만 하고 마우스를 치워도 닫지는 않습니다. 

<div id=D2>
이것은 풍선 도움말입니다. 
풍선 아무데나 눌러도 풍선을 닫습니다. <p>
<a href="javascript:alert('풍선 안의 링크를 눌렀습니다.')">링크</a>
</div>

이것을 하는데 사용한 popUp2() 함수입니다. 굵은 줄이 추가한 JavaScript 구문입니다.

function popUp2(L, e) {
        if(n4) {
		var barron = document.layers[L]
		barron.left = e.pageX 
		barron.top = e.pageY + 5
		barron.visibility = "visible"
		barron.captureEvents(Event.MOUSEUP)
		barron.onmouseup = new Function("this.visibility='hidden'")
        }
        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"
                barron.onmouseup = new Function("this.style.visibility='hidden'")
        }
}

그럼 이 페이지에서 예기할려는 풍선 안에 링크들을 사용할 수 있고 닫을 수도있는 가장 간단한 interface가 무엇일까요..? 처음 풍선을 여는 링크에게 mouseout 이벤트를 지정합니다. 하지만 사용자가 풍선안의 링크를 누를수 있는 시간을 주고 일정한 시간후에 풍선을 닫는 것입니다. 더 좋은 방법은 되는데로 만들면 있을지 모르겠지만 저는 이 방법이 가장 좋다고 생각합니다. 가장 간단한 방법이 가장 좋은 방법이니까요..

"풍선 도움말" 왼쪽의 링크는 풍선을 열기만 하고 마우스를 치우면 일정한 시간후에 풍선을 닫습니다. 사용한 구문은 아래입니다.

<script>
function popUp(L, e) {
        if(n4) {
        	var barron = document.layers[L]
		barron.left = e.pageX 
		barron.top = e.pageY + 10
		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 + 10
                barron.style.visibility = "visible"
        }
}
function popDown2(L) {
        if(n4) {
        	X = document.layers[L]
                barron_ID = setTimeout("clearTimeout(barron_ID); X.visibility = 'hidden'", 1500)
        }
        else if(e4) {
        	X = document.all[L]
                barron_ID = setTimeout("clearTimeout(barron_ID); X.style.visibility = 'hidden'", 1500)
        }
}
</script>
<a href="" onMouseOver="popUp('D2', event)" onMouseOut="popDown2('D2')"
	>"풍선 도움말"</a> 

풍선 1 / 풍선 2 / 풍선 3 / 풍선 4