mouse position...

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

<script>

function viewPoIE(evt) { var showDIV, outputValue;
    with(document.getElementById("V1IE")) {
      if (document.all)
        with(event) innerText=offsetX+','+offsetY+' / '+clientX+','+clientY+' / '+document.body.scrollLeft+','+document.body.scrollTop; // IE
        else with(evt) textContent=layerX+','+layerY+' / '+pageX+','+pageY+' / '+document.body.scrollLeft+','+document.body.scrollTop; // NN
      }
  }

</script>

<div style="width:300px; height:250px; overflow:hidden; background-color:#dddddd;" onmousemove=viewPoIE(document.all?'':event);></div>

<div id=V1IE></div>

</div>

...




...

맨 우측의 값은 페이지의 스크롤 여부인데... -.-... 왠지 여기서는 동작하지 않는다... 페이지가 따로 있어서 그런가...

...

IE 의 경우는 포인터의 위치를 event 자체가 보관해주고 있어서 그리 큰 문제시 되지 않는다.
하지만, NN 의 경우는 조금 다르다.

mouse 의 event 를 HTML tag 내에서 선언해야 마우스 위치를 잡을 수 있다.
... 그래서 별수없이(?) tag 의 onclick 내에 document.all?'':event ...라고 써서 NN 에서도 받을 수 있도록 잡아준 것.

...

IE 에서 나타나는 왼쪽값(offset)은 적용된 태그 기준의 X, Y 값, 가운데 값은 해당하는 프레임(iframe 을 생각해두면 편함...) 기준의 X, Y 값, 그리고 마지막 값은 페이지 스크롤 값이다.

NN 에서 나타나는 왼쪽값(offset)은 적용된 태그 기준의 X, Y 값, 가운데 값은 해당하는 페이지 기준의 X, Y 값, 그리고 마지막 값은 페이지 스크롤 값이다.

프레임의 X, Y 는 스크롤 여부에 따라 지정된 그림 위치가 같아도 달라지지만,
페이지의 X, Y 는 해당 페이지 내에서의 포인터 위치라, 지정된 그림위치에 대해서는 같다...고 설명할 수 있다.

...

개인적으로는 IE의 페이지 X, Y 값을 추출하기 위해 페이지 스크롤값을 사용하는데,
완전펼침의 경우라면... 글쎄... 어떻게 해야할지... (offsetParent 로 계속 추적해야하나...)

...일단 이정도만...

DoubleVictory killofki@.

Posted by killofki
,