Rev. 2.73

유독 MS IE에서는 PNG 이미지 파일의 알파 투명도를 표현할 수 없었다. 스크립트와 CSS를 이용하여 이를 표현하는 방법이 있다. 뭔가 색다른 디자인 아이탬이 될 것 이다.

1.png

적용된 모습

2.png

적용 안된 모습

아래처럼 스타일에서 정의를 해주고. 자바스크립트로 처리할 수 있다.

<style> 
.png24 { 
    tmp:expression(setPng24(this)); 
} 
</style> 
<script> 
function setPng24(obj) { 
    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 ''; 
} 
</script>

그리고 이미지의 클래스를 png24로 지정해야한다.

 예) <img class="png24" src="image.png">

스크립트 출처 : miniwini.com

또다른 방법으로는 jeolee님의 블로그처럼 png파일을 자동으로 대체되도록 하는 스크립트도 있다.

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');
	window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs() {
	var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
		if (itsAllGood && img.src.match(/.png$/i) != null) {
			var src = img.src;
			img.style.width = img.width + "px";
			img.style.height = img.height + "px";
			img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
			img.src = "./images/space.gif";
		}
		img.style.visibility = "visible";
	}
}

Comments