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

Got something to add? You can just leave a comment.

  • 제가 사용하는 두번째 소스는 제가 만든게 아니라 오래전에 줏어놓았던 거예요. 그래서 저도 출처를 잘 모르겠네요.

    reply edit

  • 그렇군요 ^^;; 소장용으로 허락없이 퍼왔답니다.(XML 피드 안한다는 것이 저의 부주의로 퍼지고 말았네요..) 댓글 감사합니다.

    reply edit

  • ㅎㅎ 소장용이라뇨... 그런거 아니예요. 단지 출처가 제께 아니라는거죠. ^^

    reply edit

  • 제가 잊지않기 위한 저만의 소장용이란 뜻이죠;
    출처는 지우도록 하겠습니다..

    reply edit

  • 파이어준님..그리고 jeolee님 감사합니다.. 덕분에 제 홈에도 png파일을 이용한 액세서리 하나 달았습니다..
    저도 좋은 소스가 있으면 잊지않기 위해서 홈에다 적용하는 습관이 있습니다.. 덕분에 예전홈은 완전히 난장판이었죠.. 지금은 많이 좋아진 편입니다..^^

    reply edit

  • 오~ 탐나는 액세서리 입니다. 담에 퍼가도록 하지요 (ㅡ.ㅡ;)

    reply edit

Your Reaction Time!

captcha

avatar