page 기준의 mouse position 추적...

object 기준의 이미지의 위치를
NN 은 layerX, layerY 를 쓰고, IE 는 offsetX, offsetY 를 쓴다.

그런데, 페이지 전체 기준의 이미지 위치는
NN 은 pageX, pageY 를 쓰는데, IE 는... 음...

...

IE:

페이지 기준의 값에 대해 IE 의 경우 보통은 이런 방법을 쓴다.

...

<div style="width:500px; height:300px; overflow:hidden; background-color:#eeeeee;">

<div style="width:400px; height:200px; overflow:hidden; background-color:#dddddd;" onmousemove='document.getElementById("withBodyValue").innerHTML=(event.clientX+document.body.scrollLeft)+" "+(event.clientY+document.body.scrollTop);'>
</div>

<div id=withBodyValue></div>

</div>

...

...

위의 예제가 조금 의심들 것이다. 현재 이 방법으로는 진짜 페이지기준의 값이 아니니까...
(IE 기준으로는 스크롤을 할 때마다 위치가 틀려짐... chrome 의 경우는 스크롤에 상관 없이 페이지기준내용이 표시됨...)
원래는 이 페이지 내에서 정확하게 이루어졌으면...싶지만, 그럴 상황이 아니니...

* popup Sample *

이걸로 대체해둔다...

...

결국, pageX 값을 추출하기 위해서... 다른 방법을 써본다.

...

<div style="width:500px; height:300px; overflow:hidden; background-color:#eeeeee;">

<script>
function getParentPo1() { var trace=event.srcElement, i, outX, outY;

  outX=event.offsetX;
  outY=event.offsetY;

  for (i=trace; i; i=i.offsetParent) {
    if (i.offsetLeft) outX+=i.offsetLeft;
    if (i.offsetTop) outY+=i.offsetTop;
    }

  return outX+' '+outY;
  }
</script>

<div style="width:400px; height:200px; overflow:hidden; background-color:#dddddd;" onmousemove='document.getElementById("withParentValue").innerHTML=getParentPo1();'>
</div>

<div id=withParentValue></div>

</div>

...

...

조금 나아졌을까...

...

NN:

이제, 이 내용들을 NN 계열과 함께 쓸 수 있도록 Mix 해본다.

...

<div style="width:500px; height:300px; overflow:hidden; background-color:#eeeeee;">

<script>
function getParentPo2(evt) { var trace, i, outX, outY;

  if (!document.all) return evt.pageX+' '+evt.pageY; // if NN, easy...

  trace=event.srcElement;
  outX=event.offsetX;
  outY=event.offsetY;

  for (i=trace; i; i=i.offsetParent) {
    if (i.offsetLeft) outX+=i.offsetLeft;
    if (i.offsetTop) outY+=i.offsetTop;
    }

  return outX+' '+outY;
  }
</script>

<div style="width:400px; height:200px; overflow:hidden; background-color:#dddddd;" onmousemove='document.getElementById("withNNValue").innerHTML=getParentPo2(document.all?"":event);'>
</div>

<div id=withNNValue></div>

</div>

...

...

조금 복잡해지긴 했는데...
...

사실, point 를 잡는 문제는
popup 을 띄우기 위한 방안이라...

NN 계열과 IE 계열 둘 다 쉽게 접근할 수 있어야하는데...

IE 라면 page 기준점 추출문제가,
NN 이라면 event 호출 문제가...

페이지 내에서 항상 point 를 잡아두도록 해야하나...라는 생각이 문득 든다.

*주의* 저속 컴퓨터의 경우에만 적용될 지 모르겠지만,
onmousemove 이벤트는 PC 의 CPU 부하를 높여서 PC 가 느려질 원인이 될 수 있다.
결국, 꼭 필요할 때 외에는 잘 안써야할 event 중 하나.

DoubleVictory killofki@.