한때 GIF파일을 웹에서 자주 사용했었다.
바로 투명(transparency)을 지원했기 때문이다.
그런데 저작권과 관련하여 여기저기에서 말들이 많이 나와 PNG라는 새로운 형식이 나왔다.
반갑게도 점차 많은 웹편집기에서 사용하는 이미지로 jpg, gif 외에 png를 지원하고 있다.
알파채널이 포함된 png24 형식은 모질라 파이어폭스에서는 제대로 보이는데 인터넷익스플로러에서는 불투명하게 보여 사용자의 의도대로 웹에 보이지 않는다. 익스플로러7에서는 제대로 보인다고 한다.
익스플로러5나 익스플로러6에서도 제대로 보이게 하는 방법이다.
1. <head>와 </head>사이에 다음 스크립트를 삽입한다.
[code]
<script language=”javascript”>
<!–
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,”);
obj.style.filter =
“progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+ obj.src +”‘,sizingMethod=’image’);”
obj.src=”;
return ”;
}
//–>
</script>
[/code]
2. <head>와 </head> 사이에 다음의 스타일을
[code]
<style type=”text/css”>
.png24 {
tmp:expression(setPng24(this));
}
</style>
[/code]
3. 표시하고자 하는 png 이미지의 링크에 다음을 추가한다.
<img src=”./images/dap_100.png” class=”png24″>
[/code]
위 방식은 백그라운드 이미지 처리를 못해서 구글링을 통해 백그라운드까지 지원되는 것을 찾았는데
적용하기가 넘 불편해서 최종적으로 아랫것을 적용. 첫번째 trans_box2는 IE용 css, 두번째 trans_box2는 FF용
.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’/75p_honey.png’);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(/75p_honey.png);
}