z-index] 이미지 DIV 의 z-index 값을 변경해봤습니다..

1)
클릭과 드래그..등의 이벤트에 관련해서

이미지가 바탕색 아래로 숨어버렸을 때
컨트롤할 수 있을까..라는 기대감으로 만들어봤습니다.

노란색 바탕 위에 이미지 DIV 를 표시했고,
mousedown 을 기점으로 이미지 DIV 를 노란바탕 아래로 숨깁니다.

...

2)

<DIV style="POSITION: relative; WIDTH: 200px; HEIGHT: 200px; OVERFLOW: hidden">
    <DIV style="Z-INDEX: 10; POSITION: absolute; TOP: 0px; LEFT: 0px" onmouseup="window.defaultStatus='';document.getElementById('D120402_1').style.zIndex=20;alert('draged');"
    onmousemove="window.defaultStatus='dragging';">
        <DIV style="BACKGROUND-COLOR: yellow; WIDTH: 200px; HEIGHT: 200px; oveflow: hidden"></DIV>
    </DIV>
    <DIV style="Z-INDEX: 20; POSITION: absolute; TOP: 0px; LEFT: 0px" id=D120402_1
    onmouseup="window.defaultStatus='';document.getElementById('D120402_1').style.zIndex=20;alert('clicked');"
    onmousedown="document.getElementById('D120402_1').style.zIndex=5;">
        <IMG width=200 height=200>
    </DIV>
</DIV>

...

...

결과는..

3)
: 밖에서 안으로 드래그..하면, clicked 로 받아주는 경우도 있습니다. (* 오류나는 경우가 있어서 확실히는.. )
: 드래그를 안에서 밖(?)으로 하면 컨트롤을 못 받으니 어쩔 수 없다는 생각이 듭니다.
: 하단에 statusBar 가 있는 경우 Drag 표시가 나긴 할겁니다. (StatusBar 를 다 켜두진 않아서 좀 애매함..)

IE8
: clicked 이벤트는 대충 작동 합니다. mouseup 이벤트가 노란색 바탕쪽으로 가지 않아 clicked 를 불러주네요.

Chrome, FireFox, Safari, Opera
: click 에 대해서, 앞에 나와있는 DIV 쪽의 말(?)을 우선 듣는 편이네요. 그냥 draged 표시해줍니다.
: 그 외에, 미묘한 차이가 보이는 것 같습니다만.. 일단 생략.

* Safari
: 밖에서 안으로 드래그 할 때, 어쩌다가 브라우져가 오류나는 경우도 봤는데요.. 어떤 문제인지는 잘 모르겠네요.

...

4)
마우스 포인터가 있는 위치..라는 개념이
브라우져마다 조금씩 차이가 있다는 재미는 있지만,

웹페이지 관련한 이벤트 처리하는 입장에서 보면,
= =;.. 이런 세세한 부분을 남겨야하는 고행을 해야하는거군요.

easyBow killofki@.