Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

Object, Flash 위에 div 레이어 올리기

오브젝트등에 레이어를 올릴 필요가 있었다. 이것은 플래시등에도 적용된다. 보통 플래시나 레이어나 태그로 해당부분을 불러온다. 오브젝트로는 보통 ActiveX를 불러오는 경우가 많고.... 이런 경우는 일반 태그와는 좀 다르게 태그위치에 입혀지다 보니 일반적인 z-index로는 div가 위로 올라오지 않고 밑으로 깔려버린다.

우리는 맵을 다루기 때문에 이 ActiveX맵이 페이지 전체를 먹어버리기 때문에 추가기능들에 대한 레이어는 맵 위에 올려야 했다. 별것 아닌것 같으면서도 은근히 어렵던.....

막상 해놓으니 간단하다. 오브젝트나 플래시는 그냥 똑같이 불러들인다. 그리고 레이어로 올릴 div를 만들고(여기서는 javascript로 활성화되기 때문에 display:none이다.) 그안에 보여줄 내용을 iframe로 넣는다.


<object id="baseObj" width="100%" height="100%" >
</object>

<div id="showContents" style="display:none; width:300px; height:400px; top:20px; left:20px; position:absolute; z-index:2;">
    <iframe  src="01.jsp" id="content1" frameborder="0" scrolling="no" width="300px" height="400px"></iframe>
</div>

그냥 보여주려면 스타일을 주면 되고 보통은 이벤트로 조작을 할테니 javascript로 div의 display를 block로 해주면 object나 flash위에 레이어를 띄울 수 있다.

덧) 이건 iframe이기 때문에 파이어폭스에서는 되지 않는다는거... iframe이 표준이 될거라는 얘기도 들은적이
2007/11/27 01:03 2007/11/27 01:03