'투명레이어'에 해당되는 글 1

  1. 2008.11.27 플래쉬 위에 투명레이어 씌우기
 

플래쉬 위에 투명레이어 씌우기

JavaScript | 2008. 11. 27. 15:54 | Posted by G.N.Jeong J.#

배너를 만들기 위해 플래쉬위에 레이어를 씌우는 일이 필요했다.
웹표준의 기본은 크로스브라우징이기 때문에 IE 이외에 FF, SAFARI 등의 브라우저도 고려해보기로 했다.

쉽지 않은 과정이었지만, 같은 과정을 반복하지 않기 위해 글로 남겨둔다.

레이어는 투명레이어를 사용해야 했고, 투명도를 사용하기 위해 스타일 설정을 모질라 개발자 사이트를 참고하여 작성하였다.

opacity: 0.6;
filter: "alpha(opacity=60)"; /* expected to work in IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;/* needed in IE up to version 7, or set width or height to trigger "hasLayout" */

또한, a 태그 이외에 레이어 클릭 시 마우스 모양도 손가락 모양으로 바꿔줘야 하므로 다음과 같은 스타일을 사용하였다.

 cursor: pointer;
 cursor: hand;

주의해야 할 것은 순서가 틀리면 안된다는 것.
pointer가 반드시 앞으로 와야 모든 브라우져에서 동작한다.


레이어는 절대좌표가 아닌 상대좌표를 이용해야 했다.
이유는 플래쉬의 위치가 가변적이기 때문이다.

하지만 여기서 세 가지 오류를 찾아내었는데,

1. 레이어 상위 엘리먼트의 가로, 높이 크기 미설정 시 엘리먼트 크기가 4배정도 커진다는 것.
2. 레이어의 가로, 높이 크기 설정 시 px 단위를 빼 먹으면 레이어가 사라지거나 폰트 높이 만큼 작아진다는 것.
3. embed 태그에 wmode="transparent" 속성을 추가해주지 않으면, ie를 제외한 나머지 브라우저에서 레이어가 플래쉬 위로 올라가지 않는 다는 것.


투명레이어는 50%로 알파속성을 주고 색도 주었으므로 자세한 내용은 사진을 참고.

ie 스샷

인터넷익스플로러 7.x 스크린샷

ff 스샷

Firefox 3.x 에서 스크린샷

safari 스샷

safari 엔진을 사용하는 구글크롬의 스크린샷



ff, safari는 레이어로 지정 시 가로,높이 속성에 px 단위를 빼먹으면 보이지도 않는다.
내용이 있어야만 보였음.

이렇게 가지각색의 반응이니 맞추는 것도 쉽지 않네.

댓글을 달아 주세요