JavaScript PNG

PNG 포맷은 투명도(alpha channel)를 지원해서 아주 유용하게 사용할 수 있지만 인터넷 익스플로러에서는 이를 지원하지 않아서 사용하기가 힘들다. 인터넷 익스플로러7에서는 PNG의 투명도를 지원하지만 인터넷 익스플로러7이하의 버젼에서는 PNG를 사용할 수 없기 때문에 사용에 유의하여야 한다.

HTC 이용 방법

인터넷 익스플로러의 HTC(HTML Component)를 사용하여 PNG 이미지를 필터 방식으로 변환하는 방법이다. 화면 로딩중에 회색으로 PNG의 투명영역이 보이는 단점이 있다.

<!--[if IE]>
<style type="text/css">
img {
	behavior: url(pngbehavior.htc);
}
</style>
<![endif]-->

HTC 파일은 아래의 사이트에서 다운 받을 수 있다.

자바스크립트 이용 방법

인터넷 익스플로러의 필터 기능를 이용해서 PNG의 알파채널을 이용할 수 있지만 추가적인 코드를 넣어줘야 하는 불편이 있다. 아래와 같은 방법을 사용하면 간단하게 PNG이미지를 사용할 수 있다.

function IE_enablePng(img) {
	if (typeof(img.style.filter) == "string") {
		img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')";
		img.src = "/image/png_blank.gif";
	}
}

작동 원리는 다음과 같다.

이미지의 src를 이용해서 alpha 필터를 <img>엘리먼트에 적용한다. 이렇게 하면 배경에 alpha가 지원되는 투명한 PNG를 적용한 것과 같게 된다.
원래의 이미지가 배경의 이미지를 가리고 있기 때문에 이 원래의 이미지를 없애 주기 위해서 투명 gif이미지로 교체 한다. 여기서 크기가 투명 gif만큼만 설정이 되기 때문에 미리 PNG이미지에 크기를 설정해 둔다. 이 과정에서 onload 이벤트를 사용하면 되지만 IE의 버그(onload 이벤트가 정상적으로 작동하지 않음)가 있기 때문에 될 수 있으면 <img> 태그에 미리 크기를 적용해 놓는 것을 권장한다.

VML 이용 방법

DD_belatedPNG

Unit PNG Fix

Unit PNG Fix는 자바스크립트를 이용해서 IE6에서 PNG 문제를 해결해주는 자바스크립트 라이브러리 이다. 하지만 위치(position) 속성이 사용된 곳에 png 배경을 사용할 경우 위치 속성이 무시되는 버그가 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<script type="text/javascript" src="/share/unitpngfix/unitpngfix.js"></script>
<title>Bug of Unit PNG Fix </title>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
}
</style>
</head>
<body>
<p>There should be no red area.</p>
<div style="position: relative; background: #f00 url(head.png);"> 
	<p>a</p>
	<div style="position: absolute; top: 0; left: 0; background: #0f0;"></div>
</div>
</body>
</html>