DOM DIV 팝업창이 플래쉬 위로 올라가는 방법

안녕하세요..^^;;

요즘 많이 사용되는것인 DIV + CSS 를 사용하고 FLASH마저 IE의 보안업데이트와 맞 물리면서 자바스크립트로 사용하는 일이 많아지고 있습니다.

저 또한 새로운 팝업 창을 띄우는것을 정말 싫어하는 성격이여서 팝업창을 닫아 주는 파이어폭스에서 많이 사용하고 있으며 인터넷 익스플로러 버전에서도 팝업창은 띄우지 않는 옵션으로 인터넷을 즐기고 있습니다.

이러한 이유로 인해서 저 또한 홈페이지를 만들경우에 팝업창을 띄우지 않는것을 좋아하고 띄우기 위해서는 DIV를 사용하여서 보여지도록 하여서 다른 사람이 피해보는 일이 없도록 하고 있습니다.

예전에는 flash 파일을 불러 올경우에는 embed 태그만을 이용하셔서 많이 불러오게 되었지만은 지금의 브라우저에서는 보안의 설정으로 인해서 활성화하기 위해서 한번 이상의 클릭을 유도 하고 있습니다. 이런 점을 피하기 위해서 요즘은 자바스크립트를 사용하여서 flash 파일을 불러오는 경우도 많은것으로 알고 있습니다.

현재 z-index 값이나 다른 방법을 이용하기 전에 웹사이트에서 보면은 아래의 그림 처럼 플래쉬 파일이 div 위쪽에 위치하여서 div 내용을 덮어 버리거나 하는 경우가 발생을 하게 됩니다.

이처럼 되어 버리면은 DIV 내용이 가리져서 다른 사람이 피해를 보거나 사용을 하지 못하는 경우도 발생을 하고 여러가지 피해가 발생을 할 수도 있으며, 디자인측면에서 바라보아도 좋지 않고 내용전달이 되지 않을 수 있습니다. 이과 같은 방법을 해결하기 위해서 아래과 같은 간단한 방법으로 태그만 수정을 해 주어도 div가 최상단으로 갈 수 있습니다.

< param name="wmode" value="opaque" >

< embed src="경로" wmode="opaque" .......

이 방법은 정말 간단하면서도 보안 설정이 되어 있지 않다면은 사용을 할 수 있습니다.

위 방법처럼 해결을 할 경우에는 아래와 같이 div 의 위치가 z-index 값을 설정 해 주어도 표현이 되지 않던 부분을 해결을 하여서 아래의 예제 그림 처럼 보여질수 있습니다.

하지만, 자바스크립트를 이용하서 플래쉬 파일을 불러 올경우에 고민이 이만 저만이 아닙니다.

자바스크립트는 알지 못하고 제대로 활용할 수 없는 사람에게는 위에서 알려드린 예제 코드 2줄만으로 어떻게 적용을 해야 되는지를 알수가 없으며 수정을 할 생각조차 할 수 없어서 사용을 피하게 될 수도 있습니다.

< script language="javascript" type="text/javascript" >
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0',
            'width', '200',
            'height', '220',
            'src', 'leftflash',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'opaque',   << 중요한 부분
            'devicefont', 'false',
            'id', 'movieClip01',
            'bgcolor', '#FFFFFF',
            'name', 'movieClip01',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'leftflash',
            'salign', ''
            ); //end AC code
    }
< /script >   

위 소스는 제가 자바스크립트를 이용하여서 저희 연구실에서 사용중인 홈페이지에 div 태그 안에서 호출한 플래쉬 파일을 불러오는 소스 입니다.

이렇게 많은 소스를 직접 사용하실분도 있고, 이 보다 편리하게 줄여서 사용하는분들도 있을것이라고 생각을 합니다.

하지만, 일반적으로 알려진 내용에서 자바스크립트의 소스를 가져와서 사용을 하게 되시면서 사용을 하시는분들께서 이렇게 보여진다고 하시면은 어디를 수정을 해야 되는지 적막강산이 아닐 수 없지만은 생각을 해보면은 아주 간단합니다.

위 예제 소스 2줄 에서 가장 많이 중복 되는 부분이 "opaque" 입니다.

이 선언이 wmode 에서 사용되도록 되어 있으녀, 자바스크립트 내에서도 wmode 라고 되어 있는 부분이 제 소스코드에서도 있습니다.

wmode 선언이 window 로  되어 있을 경우에는 화면창에서 z-index 값을 주어도 전혀 변동을 하지도 않으며, div가 항상 아래에 존재하게 됩니다.

저는 위에서 알려드린 소스 코드 2줄에서 말하였듯이 wmode 값을 'opaque'로 변경을 하여서 간단히 해결을 할 수 있었습니다.

아래의 화면은 저희 홈페이지에서 공지를 하기 위해서 작성한 div 팝업 이며, 단어를 한가지 수정함으로 인해서 간단히 변경을 할 수 있었습니다.

이 처럼 예전에 올려진 지식에서 생각을 조금만 더한다면은 쉽게 적용을 하고 변경할 방법을 찾을 수 있는것을 포기 하지 마시기 바랍니다.

제가 하고 있는 일이 ASP,PHP로 홈페이지 개발이여서 앞으로 이부분에서 대해서 실력이 딸려도 많은 부분을 알릴 생각입니다.

제가 개발하는 부분에 대해서 느낀점도 올리겠지만은 다른 공개 프로그램에서 수정에 대해서도 많이 올릴수도 있을것 같습니다.