풍선 도움말 | ../ |
ie4, ie5에서는 "TITLE"이라는 속성이 있습니다. <A>, <IMG>, <DIV>, <SPAN>등의 대부분의 택에
지정할 수 있는 속성입니다. 이 "TITLE" 속성에 안내말로 보여줄 말을 적어 놓으면 마우스를 올리면
그 글이 나옵니다.
안내말로 보여줄 글자들로 단순한 글자를 지정하는 것을 넘어서 글자를 이동시키는 것과 같은 다양한 효과도 지정할 수 있습니다. ie4, ie5에서는 <MARQUE>택을 사용하면 간단하지만 이것도 nn4에서는 지원하지 않습니다. 직접 레이어를 만들고 그림을 이동시키는 작업을 하면 "TITLE", <MARQUE> 택으로 할 수 있는 일을 할 수 있습니다. 동작도 더 다양하게 할 수 있습니다. 수평, 수직 아니면 안내말 자체를 이동시킬 수도 있습니다. 상상력이 미치는 범위가 할 수 있는 한계입니다. (윽.. 너무 고차원적인 말인가.. :)
링크에게 마우스로 동작을 하였을 때, 링크와 안내말의 위치를 고려하여 안내말을 보여주어야 합니다. 둘이 너무 떨어져 있으면 링크의 안내말이라는 것을 표현하기가 부족합니다. 너무 가깝게 있어도 보기가 좋지 않고 잘못하면 링크를 마우스로 누를수 없는 상황이 일어날 수 있습니다.
링크와 안내말의 위치를 고려하여 안내말을 보여주기 위해서는 마우스 이벤트가 일어났을 때의 "event" 객체를 사용합니다. 이 "event"는 여러가지 이벤트에 관한 정보를 가지고 있는데 "풍선도움말"을 만들기 위해서 필요한 정보는 페이지에서의 이벤트가 일어난 좌표입니다. 즉, 링크에서 마우스 이벤트가 일어났는 위치를 가지고 있습니다. 이 위치로 적절한 좌표로 안내말을 배치하면 알맞은 위치로 안내말을 보여줄 수 있습니다.
특정한 이벤트가 일어났을 때의 좌표를 가지고 있는 JavaScript 요소가 nn4에서는 e.pageX, e.pageY 입니다. ie4, ie5에서는 event.clientX, event.clientY입니다.
e.pageX, e.pageY는 페이지의 전체 크기에서 위치입니다. 반면에 event.clientX, event.clientY는 페이지가 보이는 즉, 한 페이지 에서의 좌표입니다. 그래서 페이지가 한 페이지가 넘어서 페이지에 이동막대가 생긴다면 이동막대로 움직인 크기(document.body.scrollLeft , document.body.scrollTop)를 같이 더해주어야 nn4의 e.pageX, e.pageY 값과 같은 값을 가지게 됩니다. 그래서 한 페이지가 넘는 페이지에서는 아래의 식으로 두 브라두저에서 이벤트가 일어난 실제 좌표를 알 수 있습니다.
e.pageX = event.clientX + document.body.scrollLeft e.pageY = event.clientY + document.body.scrollTop로 지정하면 페이지의 양에 상관없이 이벤트가 일어난 위치를 알 수 있습니다.
위의 이벤트 요소들 외에도 좌표를 나타내는 요소로는 상위에서의 이벤트를 나타내는 요소인 두 브라우저 모두 event.x, event.y 가 있습니다. 이것을 사용하면 페이지 전체적인 좌표가 아니고 상위에서의 좌표로 지정됩니다.
position을 지정한 레이어(css-p)는 자신의 상위에 position을 지정한 택이 있으면 그것이 자신의 상위가 되고 만약 없으면 페이지 전체를 가리키는 <BODY>가 됩니다. 링크 자신의 상위에 position을 지정한 택이 없다면 이것들을 사용하면 되지만 ie5에서는 자신의 상위가 <BODY> 였을 때, 페이지 전체의 좌표가 아니고 보이는 부분의 가장 위에 지정되는 버그가 있습니다. 그래서 event.x, event.y는 nn4, ie4에서만 정상적으로 작동합니다. 일반적으로 안내말로 열고자하는 레이어는 단순한 레이어일 것이기 때문에 굳이 상위를 참조할 필요가 없을 것입니다. 그래서 nn4에서는 e.pageX, e.pageY를 사용하고 ie4, ie5는 event.clientX + document.body.scrollLeft 와 event.clientY + document.body.scrollTop 를 사용할 수 있습니다.