2010년 3월 10일 수요일

IE6 웹에서 png 투명파일 출력하기

Internet Explorer 7부터는 알파 PNG 이미지를 지원하기때문에 상관이 없지만 대다수가 아직 Internet Explorer 6 버전을 사용하고 있기에 종종 부자연스러운 이미지를 발견할 수 있다. 스크립트와 CSS를 이용하여 알파 PNG 이미지의 투명도를 설정할 수 있다. (ex.이미지의 클래스는 png24로 지정한다.)

다음과 같이 CSS를 정의한 후에 png 이미지의 클레스를 지정해 주면 png 파일도 웹에서 출력할 수 있다.

[code html] [/code]


위 소스를 사용하여 페이지를 작성하였을 경우 비스타 운영체제에서 페이지를 리로드 할때마다 플래쉬가 보였다 안보였다 하는 문제가 발생한다.

 

이러한 문제로 익스7.0에서는 위 패치코드를 실행하지 않도록 수정하여보았다.
익스7.0에서부터는 png 파일을 패치없이 출력할 수 있으므로 7.0부터 적용되게 하였다.

[code javascript]function setPng24(obj) { var request_os = window.navigator.userAgent; var os_array = request_os.split(";"); if(os_array[1] != " MSIE 7.0") { obj.width=obj.height=1; obj.className=obj.className.replace(/png24/i,''); obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"; obj.src=''; } return ''; }[/code]

댓글 없음:

댓글 쓰기