플래쉬 위에 DIV 올려서 링크걸기, placing a div over flash..
플래쉬위에 DIV 를 올리면 , 자꾸 플래쉬가 앞으로 나와서 DIV를 가려서 곤란한 경우가 많다. 특히나 링크를 걸어야 할경우 플래쉬에는 링크가 걸리지 않는다. 플래쉬 파일소스를 수정해서 링크를 걸어도 되지만, 플래쉬파일이 다른사이트에도 공통적으로 사용되는 경우에는 여간 귀찮은게 아니다.
이번에 날씨 배너를 제작하게 되었다. 위 이미지에는 움직이지 않지만, 원래는 날씨아이콘이 움직이는 플래쉬다. 이 배너를 클릭하면 특정URL로 이동하게 된다.
플래쉬 아이콘 소스를 수정해서 , 링크를 걸어줄수있다. 하지만, 아이콘을 이 배너에만 쓰이는것이 아니라 다른곳에도 공통적으로 쓰이고 있다. 플래쉬 소스를 손대지 않고 링크를 걸어야한다.
가장 쉬워보이는 방법인 div태그를 이용해서 링크를 걸었다. 그런데 예상치 못하게 플래쉬가 div위로 자꾸 올라와서 링크가 걸리지 않았다.
인터넷 서핑을 하다가 display 를 block 으로 주면, div 가 플래쉬 위로 올라온다는 것을 알게 되었다. display 스타일을 먹이자 플래쉬위로 div가 올라왔다.
모든게 끝난줄 알았는데, 익스플로에서 문제가 생겼다. 익스플로는 div에 배경색을 줘야지만 한다. 그런데, div에 배경색을 주면 아래쪽에 위치한 배너가 보이지 않는다.
고민끝에 배경색 대신 배경이미지를 넣었다. 배경이미지를 넣는데, 존재하지 않는 이미지 이름을 넣었다. img 태그에서는 존재 하지 않는 이미지를 넣을경우 X 박스가 뜨지만, 배경에는 아무것도 나타나지 않는다.
여기까지 3시간이 걸렸다. 왠지 낙담이다. 3시간이나 투자해야할 일이 아닌데.. OTL
<div style="position:absolute;cursor:pointer;display:block;width:500px;height:500px;z-index:100;background-image:url(wow.gif);" onClick="top.location.href=’http://moonseller.net’;”></div>
<embed…>여긴 플래쉬파일</embed>
혹시나 비슷한 문제로 고민하는 분들을 위해 소스를 공개한다.